react-native - 无法更改 flatlist renderItem 中的 Prop

Question

我正在尝试使用两种方式呈现数组数据:Normal View 和 FlatList。我了解到，我们在 ma​​p 和 renderItem 中传递了 props。

第一个 block 给出正确的输出:

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

Answer 1

问题是在你的 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 Docs , Flatlist 返回一个如下所示的对象:

{item, index, separators}

item 是您需要渲染的项目。

所以你需要使用:

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

或

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