React Native，我不知道为什么它不能显示信息，我可以获取数据但不显示给我

Question

React Native，我不知道为什么它不能向我显示信息，我可以获得数据但就是不显示给我。

当我查看日志时，有数据，但不知道为什么就是无法显示给我。

在我的代码中，

export default function Categories(categoryList) {
  console.log("=============>>>>>", categoryList);
  return (
    <View className="mt-3">
      <Text className="font-bold text-[20px]">Categories</Text>
      <FlatList
        data={categoryList}
        numColumns={4}
        renderItem={({ item, index }) => (
          <View className="flex-1 items-center justify-center  p-2 border-[1px] border-gray-300 m-1 h-[80px] rounded-lg">
            <Image source={{ uri: item.icon }} className="w-[40px] h-[40px]" />
            <Text className="text-[12px]">{item.name}</Text>
          </View>
        )}
      />
    </View>
  );
}

这是日志。

 LOG  =============>>>>> {"categoryList": [{"icon": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSN2-1V6diClBPxDfdbemCZ-YZdBZ2sctV4-A&usqp=CAU", "name": "Pork"}, {"icon": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTL_90y045ZwtaL_8blhj1Yu8t-xrntETuuhUAlLIaO9bKssbu5LXiTaPOKVLxa6YV4wSk&usqp=CAU", "name": "Wagyu"}, {"icon": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQtNk7qbfHVbJkIrde4DFhTj7-acZupS0BMmA&usqp=CAU", "name": "Lamb"}]}
 LOG  =============>>>>> {"categoryList": [{"icon": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSN2-1V6diClBPxDfdbemCZ-YZdBZ2sctV4-A&usqp=CAU", "name": "Pork"}, {"icon": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTL_90y045ZwtaL_8blhj1Yu8t-xrntETuuhUAlLIaO9bKssbu5LXiTaPOKVLxa6YV4wSk&usqp=CAU", "name": "Wagyu"}, {"icon": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQtNk7qbfHVbJkIrde4DFhTj7-acZupS0BMmA&usqp=CAU", "name": "Lamb"}]}
 LOG  =============>>>>> {"categoryList": [{"icon": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSN2-1V6diClBPxDfdbemCZ-YZdBZ2sctV4-A&usqp=CAU", "name": "Pork"}, {"icon": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTL_90y045ZwtaL_8blhj1Yu8t-xrntETuuhUAlLIaO9bKssbu5LXiTaPOKVLxa6YV4wSk&usqp=CAU", "name": "Wagyu"}, {"icon": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQtNk7qbfHVbJkIrde4DFhTj7-acZupS0BMmA&usqp=CAU", "name": "Lamb"}]}

类别无法显示图标和名称。我也找不到任何错误。

哪里有问题？

Answer 1

在您当前的实现中，

categoryList

未从组件的 props 中正确解构。

export default function Categories({ categoryList }) {
 ...
}

您可以在此处了解有关 JavaScript 解构赋值的更多信息。

Answer 2

您需要解构

props

或从

props

对象调用它。

选项1

export default function Categories(props) {
return (

   <FlatList
     data={props.categoryList}
     ...
   />
 }
 ...
)

选项2

export default function Categories(props) {
const { categoryList } = props;
return (

   <FlatList
     data={categoryList}
     ...
   />
 }
 ...
)

选项3

提供这里