将数组传递给 FlatList React Native（不渲染）

Question

所以我有这个数组，如下图：

const categoryData=[
        {
            id: 1,
            name: "cat1",
            icon: icons.one
        },
        {
            id: 2,
            name: "cat2",
            icon: icons.two
        },
]

我正在尝试将其存储在名为类别的 useState const 中，然后在 FlatList 的数据参数中显示类别：

const [categories, setCategories] = React.useState(categoryData)

<FlatList
    data={categories}
    keyExtractor={item => `${item.id}`}
    renderItem={renderItem}
    numColumns={4}
    contentContainerStyle={{ padding: SIZES.padding }}
/>

但是，在 FlatList 中没有呈现任何内容（需要注意的重要一点是，FlatList 在触发模式时加载，并且 FlatList 在 data={categoryData} 而不是仅呈现类别时正确呈现项目）。

感谢您的帮助。

编辑：这里有一个 Expo link 来描述这个问题 (https://snack.expo.dev/HsffYfsrc)

Answer 1

如果您说它在触发模式时有效，那么问题可能是您的数据尚未准备好加载。我建议你试试：

{categories && <FlatList
data={categories}
keyExtractor={item => `${item.id}`}
renderItem={renderItem}
numColumns={4}
contentContainerStyle={{ padding: SIZES.padding }}/>}

Answer 2

在您的代码示例中，您已经 used/referenced categoryData 先于声明它。

const App = () => {
  const [categories, setCategories] = React.useState(categoryData); // <-- used, undefined
  const [modalVisible, setModalVisible] = React.useState(false);

  const categoryData = [ // <-- declared here
    {
      id: 1,
      name: 'cat1',
      icon: 'test'
    },
    {
      id: 2,
      name: 'cat2',
      icon: 'test'
    },
  ];

  function renderList() {
    ...
  }

  return <SafeAreaView>{renderList()}</SafeAreaView>;
}

我没有看到任何内部依赖关系（对组件）要求在组件内声明 categoryData。我建议在组件外部声明它，以便它在组件之前和范围内声明。

const categoryData = [ // <-- declared
  {
    id: 1,
    name: 'cat1',
    icon: 'test',
  },
  {
    id: 2,
    name: 'cat2',
    icon: 'test',
  },
];

const App = () => {
  const [categories, setCategories] = React.useState(categoryData); // <-- defined
  const [modalVisible, setModalVisible] = React.useState(false);

  function renderList() {
    ...
  }

  return <SafeAreaView>{renderList()}</SafeAreaView>;
};

Expo Snack

如果 categoryData 在编译时未知，并且 实际上 稍后获取，则提供有效的初始状态和 load/update category 状态在 useEffect 钩子中。

示例：

const App = () => {
  const [categories, setCategories] = React.useState([]); // <-- valid initial state
  const [modalVisible, setModalVisible] = React.useState(false);

  useEffect(() => {
    ... fetch/loading logic
    setModalVisible(data); // <-- update state with fetched/loaded data
  }, []);

  function renderList() {
    ...
  }

  return <SafeAreaView>{renderList()}</SafeAreaView>;
};

将数组传递给 FlatList React Native（不渲染）

Passing Array into FlatList React Native (Not Rendering)

arrays

json

react-native

react-native-flatlist

react-hooks