React Native 的 FlatList 属性 renderItem 需要额外的“item"；(项目) =>{item.item.name}? [英] React Native's FlatList prop renderItem requires extra "item" (item) => {item.item.name}?

问题描述

在这里，我试图在 FlatList 中显示一个名为posts"的数组.

Here I am trying to display an array called "posts" in a FlatList.

render() {
    console.log(this.props.posts);
    return (
        <View style={this.styles.container}>
            <FlatList
                data={this.props.posts}
                renderItem={(item) => <Text> {item.name} </Text>}
            />
        </View>
    );
}

如该控制台日志所示，posts 数组已正确填充.

As seen in this console log, the posts array is correctly populated.

但是上面的代码并没有在 FlatList 中显示任何数据.

But the above code doesn't display any data in the FlatList.

但是，在 renderItem 中，如果我添加一个额外的item"属性，它会起作用.

However, in renderItem, if I add an extra "item" property it works.

renderItem={(item) => <Text> {item.item.name} </Text>}

这种行为的原因是什么.

What is the reason for this behavior.

推荐答案

ReactNative 的 FlatList 的输入不是 item，而是一个包含 3 个参数的对象:item 为实际数据, index 用于索引和 separators 对象以自定义您的项目组件.您所做的是将该对象命名为 item，并从该对象中获取实际的 item.

Input of ReactNative's FlatList is not item, but an object containing 3 parameters: item for actual data, index for index and separators object to customize your item component. What you did is naming that object item, and get actual item from the object.

为避免混淆，请考虑使用 ES6 速记:

To avoid confusion, consider using ES6 shorthand:

renderItem={({ item, index }) =><文字>{item.name} }

这篇关于React Native 的 FlatList 属性 renderItem 需要额外的“item"；(项目) =>{item.item.name}?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！