Ошибка TypeScript: добавление типа в .map массив объектов - PullRequest
Новая
       18

Ошибка TypeScript: добавление типа в .map массив объектов

0 голосов
/ 13 января 2020

Я пытаюсь добавить типы к объекту Item, который возвращается из unitedStates.map((item: Item) => {}, но я не могу правильно добавить типы.

Я определил unitedStates массив объектов как unitedStates: Array<UnitedStates>, и это кажется правильным, но Я не уверен, почему Item неправильно введен.

Ошибка: 

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

                 {unitedStates.map((item: Item) => {

Types.tsx: 

// TypeScript: Types
interface Props {
  title: string,
  onPress: Function,
  onValueChange: Function,
}

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

interface UnitedStates {
  label: string,
  value: string,
};

Соединенные Штаты (массив объектов): 

// United States
  const unitedStates: Array<UnitedStates> = [
    { label: 'AL', value: 'AL' },
    { label: 'AK', value: 'AK' },
    { label: 'AZ', value: 'AZ' },
    { label: 'AR', value: 'AR' },
    { label: 'CA', value: 'CA' },
    { label: 'CO', value: 'CO' },
    { label: 'CT', value: 'CT' },
    { label: 'DE', value: 'DE' },
    { label: 'FL', value: 'FL' },
    { label: 'GA', value: 'GA' },
    { label: 'HI', value: 'HI' },
    { label: 'ID', value: 'ID' },
    { label: 'IL', value: 'IL' },
    { label: 'IN', value: 'IN' },
    { label: 'IN', value: 'IN' },
    { label: 'KS', value: 'KS' },
    { label: 'KY', value: 'KY' },
    { label: 'LA', value: 'LA' },
    { label: 'ME', value: 'ME' },
    { label: 'MD', value: 'MD' },
    { label: 'MA', value: 'MA' },
    { label: 'MI', value: 'MI' },
    { label: 'MN', value: 'MN' },
    { label: 'MS', value: 'MS' },
    { label: 'MO', value: 'MO' },
    { label: 'MT', value: 'MT' },
    { label: 'NE', value: 'NE' },
    { label: 'NV', value: 'NV' },
    { label: 'NH', value: 'NH' },
    { label: 'NJ', value: 'NJ' },
    { label: 'NM', value: 'NM' },
    { label: 'NY', value: 'NY' },
    { label: 'NC', value: 'NC' },
    { label: 'ND', value: 'ND' },
    { label: 'OH', value: 'OH' },
    { label: 'OK', value: 'OK' },
    { label: 'OR', value: 'OR' },
    { label: 'PA', value: 'PA' },
    { label: 'RI', value: 'RI' },
    { label: 'SC', value: 'SC' },
    { label: 'SD', value: 'SD' },
    { label: 'TN', value: 'TN' },
    { label: 'TX', value: 'TX' },
    { label: 'UT', value: 'UT' },
    { label: 'VT', value: 'VT' },
    { label: 'VA', value: 'VA' },
    { label: 'WA', value: 'WA' },
    { label: 'WV', value: 'WV' },
    { label: 'WI', value: 'WI' },
    { label: 'WY', value: 'WY' },
  ];

Метод визуализации: 

// Render iOS Picker
  const renderIOSPicker = () => {
    try {
      return (
        <Picker
          selectedValue={state}
          onValueChange={selectState}>
          {unitedStates.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 ]

0 голосов
/ 14 января 2020

Проблема заключалась в том, что я неправильно набирал объект unitedStates с Array<UnitedStates>, поэтому код должен выглядеть следующим образом:

Типы: 

interface UnitedStates {
  [index: number]: { label: string; value: string };
  map: Function,
}

UnitedStates Typing: 

  const unitedStates: UnitedStates = [];
0 голосов
/ 13 января 2020

Вы отображаете UnitedStates[], но вы намекаете на тип элемента (объекта UnitedStates) в обратном вызове как Item.

Возможно, вы хотите это 

     {unitedStates.map((item: UnitedStates) => {
           return (
              <Picker.Item
                label={item.label}
                value={item.value}
                key={item.key || item.label}
                color={item.color}
              />
            );
     })}

Или это 

     {myItems.map((item: Item) => {
           return (
              <Picker.Item
                label={item.label}
                value={item.value}
                key={item.key || item.label}
                color={item.color}
              />
            );
     })}
...