React Native的FlatList属性renderItem是否需要额外的“ 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>}

Answer 2

这是常见的行为。 通过执行对象分解可以得到所需的行为：

<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 Flatlist-RenderItem不起作用