javascript - React Native的FlatList属性renderItem是否需要额外的“item”(项目)=> {item.item.name}？

在这里，我试图在FlatList中显示一个名为“ posts”的数组。

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数组已正确填充。


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



但是，在renderItem中，如果我添加一个额外的“ item”属性，它将起作用。

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

此行为的原因是什么。

最佳答案

ReactNative的FlatList的输入不是item，而是一个包含3个参数的对象：item代表实际数据，index代表索引和separators用来自定义项目组件的对象。您所做的就是命名该对象item，并从该对象获取实际的item。

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

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

关于javascript - React Native的FlatList属性renderItem是否需要额外的“item”(项目)=> {item.item.name}？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53776318/