reactjs - JSX Öğe Türü Hatası: .map fonksiyonundan dönen objeye Türler Eklemek

`.map` fonksiyonundan döndürülen nesneye item tipini eklemeye çalışıyorum. Ancak, bir JSX hatası alıyorum ve Item tipine item: JSX.Element eklemeyi denedim, ama bu doğru çalışmıyor gibi görünüyor. Birisi bunu benim için açıklayabilir mi? Aşağıda hata, tipler ve kod bulunmaktadır.

Hata:

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) => {
                              ~~~~~~~~~~~~~~~~~

Türler:

// 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);
    }
  };

Cevap #1

Görünüşe göre props'larınız items öğesini bir string dizisi olarak tanımlıyor, bu yüzden bir string dizisi üzerinde map işlemi yaparken map geri çağırma imzası (element: string, index: number, array: string[]) oluyor. Bence eğer props arayüzünü items için items: Array<Item>, olarak güncellerseniz, artık doğru şekilde eşleşmesi gerekir.

// 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,
}

Cevap #2

Buradaki sorunun, item türü (yani map fonksiyonunuzun argümanı) ile Props arayüzünde tanımlanan items dizisinin türü arasındaki tutarsızlıktan kaynaklandığı anlaşılıyor.

Props arayüzünüz items alanını bir dizi string olarak tanımlıyor, oysa render kodunuz items alanının bir Item nesneleri dizisi olmasını bekliyor.

Eğer kodunuzu gözden geçirip yeniden düzenleyebilir ve Props'un şu şekilde tanımlanmasını sağlayabiliyorsanız:

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

O zaman bu hatayı çözmelidir.

İlgili makaleler