Ошибка типа элемента JSX: добавление типов к объекту, возвращенному из функции .map - PullRequest
Новая
       22

Ошибка типа элемента JSX: добавление типов к объекту, возвращенному из функции .map

1 голос
/ 12 января 2020

Я пытаюсь добавить тип item к объекту, который возвращается из функции .map . Тем не менее, я получаю сообщение об ошибке JSX, и я попытался добавить item: JSX.Element к типу Item, но это не работает правильно. Может кто-нибудь уточнить это для меня? Ниже приведена ошибка, типы и код.

Ошибка: 

src/ListPicker.tsx:69:28 - error TS2345: Argument of type '(item: Item) => JSX.Element' is not assignable to parameter of type '(value: string, index: number, array: string[]) => Element'.
  Types of parameters 'item' and 'value' are incompatible.
    Type 'string' is not assignable to type 'Item'.

      {props.items.map((item: Item) => {
                              ~~~~~~~~~~~~~~~~~

Типы: 

// TypeScript: Types
interface Props {
  title: string,
  items: Array<string>,
  onPress: Function,
  onValueChange: Function,
}

interface Item {
  label: string,
  value: string,
  key: number | string,
  color: string,
};

ListPicker.tsx: 

// Render iOS Picker
  const renderIOSPicker = () => {
    try {
      return (
        <Picker
          selectedValue={value}
          onValueChange={selectValue}>
          {props.items.map((item: Item) => {
            return (
              <Picker.Item
                label={item.label}
                value={item.value}
                key={item.key || item.label}
                color={item.color}
              />
            );
          })}
        </Picker>
      )
    }
    catch (error) {
      console.log(error);
    }
  };

Ответы [ 2 ]

1 голос
/ 12 января 2020

Похоже, ваши реквизиты определяют items как массив строк, поэтому при отображении на массив строк подпись обратного вызова карты равна (element: string, index: number, array: string[]). Я думаю, что если вы обновите интерфейс реквизита для items, чтобы он стал items: Array<Item>,, теперь он должен совпадать. 

// TypeScript: Types
interface Item {
  label: string,
  value: string,
  key: number | string,
  color: string,
};

interface Props {
  title: string,
  items: Array<Item>, // use array of type you defined above
  onPress: Function,
  onValueChange: Function,
}
1 голос
/ 12 января 2020

Кажется, проблема здесь заключается в несоответствии между типом item (ie в аргументе вашей функции карты) и типом массива items, как определено в интерфейсе Props.

Ваш интерфейс Props определяет поле items как массив строк, где, поскольку ваш код рендеринга ожидает, что поле items будет массивом Item объектов.

Если вы возможность пересмотреть и реорганизовать ваш код так, чтобы Props был определен как: 

interface Props {
  title: string,
  items: Array<Item>,
  onPress: Function,
  onValueChange: Function,
}

Тогда это должно устранить ошибку.

...