FlatList 不渲染来自 json 数组 React-native 的数据答案

【问题标题】：FlatList not rendering data from json array React-nativeFlatList 不渲染来自 json 数组 React-native 的数据
【发布时间】：2021-05-17 13:14:31
【问题描述】：

我在 React Native 中有一个 FlatList -

这是我要传递给 FlatList 的对象。

    const [workoutSet, setWorkoutSet] = useState([
        { setNum: 1, reps: 10, weight: 0 },
        { setNum: 2, reps: 10, weight: 0 },
    ]);

    <SetList data={workoutSet} />

在 SetList 中，我正在尝试渲染传递到此处的数据。

export default function SetList(data) {
    return (
        <>
            <FlatList
                data={data}
                renderItem={(item) => {
                    <Text style={styles.name}> {item} </Text>;
                }}
            />
            {console.log(data.data[0].reps)}
        </>
    );
}

console.log(data.data[0].reps) 按预期返回 10。

但是，如果我在 renderItem 中执行 console.log，它不会打印任何内容。我想在renderItem 中访问setNum, reps and weight，以便显示一个列表。我究竟做错了什么？我搜索了 StackOverflow，但找不到答案。谢谢。

【问题讨论】：

data={data} 应该是 data={data.data}。或者，您可以在函数参数中解构：function SetList({ data })（如果不解构，则更常规的方法是调用参数props。一致的命名对于避免混淆很重要。）
让它像这样，看看什么是物品，如果你的物品是一个你不会在手机上看到它的对象---比如 item.reps --- renderItem={(item) => {console .log("item");return( {item} ) }}
好的，我已将数据更改为道具函数 SetList(props)。然后我设置数据 = {data.data}。但它没有返回任何东西。 :(
组件不显示对象
我什至不能在 renderItem 中执行 console.log(item)，这似乎是这里的问题。

标签： javascript json reactjs react-native react-native-flatlist

【解决方案1】：

工作示例渲染中的项目是一个对象，这就是它不显示的原因文本组件不将对象显示为文本我建议阅读有关 flatlist 的内容以了解更多信息 - 密钥提取器 -布局

喜欢最佳实践，因为它对于大型列表可能是个问题（100 行的性能非常慢）

工作示例 https://snack.expo.io/LpItecGOc

【讨论】：