javascript - React Native 的 FlatList prop renderItem 需要额外的 "item"(item) => {item.item.name}?

Question

这里我试图在 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>}

这种行为的原因是什么。

Answer 1

ReactNative 的 FlatList 输入不是 item ，但是一个包含 3 个参数的对象:item对于实际数据，index对于索引和 separators对象来自定义您的项目组件。您所做的是将该对象命名为 item , 并得到实际的 item来自对象。

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

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