не может изменить реквизит в flatlist renderItem - PullRequest
Новая
       19

не может изменить реквизит в flatlist renderItem

1 голос
/ 04 ноября 2019

Я пытаюсь отобразить массив данных DATA двумя способами: Обычный вид и FlatList . Что я узнал, мы передаем props в map и renderItem .

Первый блок дает правильный вывод: 

const DATA = [
    {id: '1',title: 'First Item'},
    {id: '2',title: 'Second Item'},
]

const list = DATA.map((lst)=>{
    return(<Text key={lst.id}>{lst.title}</Text>)
})

const Home=()=>{
  return (<View><Text>{list}</Text></View>)
}
export default Home

В следующем FlatList Компоненте выдает ошибку: 

TypeError:TypeError:undefined is not an object(evaluating 'lst.title')

Если я изменю lst на Item, тогда он показывает правильный вывод. item является предопределенным ключевым словом в renderItem? Если я заменю item на любое другое слово, оно выдаст ошибку. 

const DATA = [
    {id: '1',title: 'First Item'},
    {id: '2',title: 'Second Item'},
] 
const Itm=({title})=>{
  return (
    <View>
      <Text>{title}</Text>
    </View>
  );
}

const Home=()=>{
  return (
      <FlatList
        data={DATA}
        renderItem={({lst}) => <Itm title={lst.title} />}
        keyExtractor={itm => itm.id}
      />
  );
}
export default Home

Ответы [ 3 ]

0 голосов
/ 04 ноября 2019

попытайтесь удалить {} 

renderItem={({lst}) => <Itm title={lst.title} />}

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

    renderItem={(lst) => <Itm title={lst.title} />}
0 голосов
/ 04 ноября 2019

Вы можете получить доступ к элементу данных в renderItem, уничтожив элемент следующим образом: 

   <FlatList
        data={DATA}
        renderItem={({item}) => <Itm title={item.lst.title} />}
        keyExtractor={itm => itm.id}
      />

Или, может быть, так, поскольку я не знаю вашу форму данных: 

   <FlatList
        data={DATA}
        renderItem={({item}) => <Itm title={item.title} />}
        keyExtractor={itm => itm.id}
      />

Документы:

https://facebook.github.io/react-native/docs/flatlist#renderitem

0 голосов
/ 04 ноября 2019

Проблема в том, что в вашем renderItem вы деструктурируете свой объект, читая ключевое слово lst: 

renderItem={({lst}) => <Itm title={lst.title} />} //Wrong

Вы пытаетесь прочитать свойство lst в объекте, который не имеетэтот ключ.

изменить ({lst}) на (lst): 

renderItem={(lst) => <Itm title={lst.title} />}

Вы можете прочитать о разрушении объекта в: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring

РЕДАКТИРОВАТЬ.

Глядя на FlatList react-native Документы , Flatlist возвращает объект, похожий на: 

{item, index, separators}

Где item - это элемент, который необходимо визуализировать.

Так что вам нужно либо использовать: 

renderItem={({item }) => <Itm title={lst.title} />} //must be item

или 

renderItem={({item: lst}) => <Itm title={lst.title} />}
...