时间戳

首页 > 解决方案 > React Native 的 FlatList proprenderItem 需要额外的“item”(item) => {item.item.name}？

javascript - React Native 的 FlatList proprenderItem 需要额外的“item”(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 中，如果我添加一个额外的“项目”属性，它就可以工作。

在此处输入图像描述

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

这种行为的原因是什么。

标签： javascriptreact-native

解决方案

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

为避免混淆，请考虑使用 ES6 简写：

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

推荐阅读