0

Столкнулся с такой проблемой, пытаюсь вывести меню в реакте и задать параметру функции map нужный тип. Делаю следущим образом:

interface Navigation {
    text: String
}

const Controls: React.FC = () => {
    return (
        <ul className="controls">
            {CONTROLS_NAV.map((title: Navigation) => {
                return (
                    <li className="controls_item">
                        <a href="#" className="controls_link active_state">{title.text}</a>
                    </li>
                )
            })}
        </ul>
    )
};

CONTROLS_NAV ипортируется с другого файла, это обычный массив объектов.

export const CONTROLS_NAV: Array<Object> = [
    {
        text: 'Card View',
    },
    {
        text: 'List View'
    },
    {
        text: 'Add Customer'
    }
];

Но почему-то здесь выдается ошибка, . Если же поле text в интерфейсе Navigation поставить как необязательное, то ошибки этой нет. Подскажите пожалуйста что я делаю не так? Как заставить этот код работать с обязательным полем text?

4
  • для начала надо убрать лишнюю запятую после 'Card View'
    – santavital
    20 апр 2020 в 9:15
  • 1
    @santavital а разве это невалидно? 20 апр 2020 в 9:20
  • 1
    @ИльяПаймушкин всё верно, нужно добавить ещё две :)
    – ZiiMakc
    20 апр 2020 в 15:43
  • ......... ( : три
    – qwabra
    27 апр 2020 в 5:43

1 ответ 1

1

Типы Array<Object> и Navigation несовместимы

введите сюда описание изображения

Вот как нужно (типы можно тоже экспортировать).

interface Navigation {
  text: string
}

export const CONTROLS_NAV: Navigation[] = [
  {
    text: 'Card View',
  },
  {
    text: 'List View',
  },
  {
    text: 'Add Customer',
  },
]

const Controls: React.FC = () => {
  return (
    <ul className='controls'>
      {CONTROLS_NAV.map((title: Navigation) => {
        return (
          <li className='controls_item'>
            <a href='#' className='controls_link active_state'>
              {title.text}
            </a>
          </li>
        )
      })}
    </ul>
  )
}

Navigation в map тоже можно убрать.

2
  • спасибо за ответ!
    – Lorax
    27 апр 2020 в 10:04
  • @Lorax не забывайте принимать ответ, чтобы не тратить время других.
    – ZiiMakc
    28 апр 2020 в 14:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.