React Native的FlatList属性renderItem是否需要额外的“项目”（项目）=> {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={this.renderItem} />

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

如果要渲染复杂的组件，则可能出于代码可读性的考虑而这样做。

test_list = [
             [('c1t1'), ('c1t2'), ('c1t3'), ('c1t4'), ('c1t5')],
             [('c2t1'), ('c2t2'), ('c2t3')],
             [('c3t1'), ('c3t2')],
             [('c4t1'), ('c4t2')],
             [('c5t1')]
                    ]

可能还是要在这里调查您的问题。

ReactNative Flatlist - RenderItem not working