Javascript React Native的平面列表属性renderItem需要额外的“项”（项）=>{item.item.name}？

在这里，我试图在平面列表中显示一个名为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数组已正确填充。

但是上面的代码不显示平面列表中的任何数据

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

但是，在renderItem中，如果我添加了一个额外的item属性，它就会工作

---

这种行为的原因是什么。

这是一种常见的行为。通过按如下方式执行对象分解，可以获得所需的行为：

<FlatList
    data={this.props.posts}
    renderItem={({item}) => <Text> {item.name} </Text>}
/>

如果您正在呈现复杂的组件，那么出于代码可读性的考虑，您可能希望这样做

<FlatList
    data={this.props.posts}
    renderItem={this.renderItem} />

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

不过我想看看你的问题

---

ReactNative的平面列表的输入不是项，而是一个包含3个参数的对象：用于实际数据的项、用于索引的索引和用于自定义项组件的分隔符对象。您所做的是命名该对象项，并从该对象获取实际项

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

---

renderItem={item，index}=>{item.name}

您可能会发现此链接非常有用，感谢您的解释：