在 React Native 中使用 useState 无限重复更新 FlatList 数据

Question

我正在尝试使用 useState 为平面列表设置数据，但更新状态会导致组件重新呈现，因此它会再次调用 getInventory 函数并无限重复出现，从而导致应用程序崩溃。我使用的是函数组件，而不是 class。如果我将 getInventory 位放在 useEffect 中，它不会崩溃，但会不断调用 InventoryItem 组件中的 useEffect 函数。我看不出我做错了什么

    const [data, setData] = useState([]);

    getInventory().then((list) => {
        setData(list)
    })    

    const renderItem = ({item}) => {
        return <InventoryItem item={item}/>
    };

    return (
        <SafeAreaView>
            <FlatList       
                data={data}
                renderItem={renderItem}
                keyExtractor={item => item.id}
            />  
        </SafeAreaView>
    );

Answer 1

将 useEffect 与空依赖项数组一起使用，因此它只会运行一次：

useEffect(() => {
  getInventory().then((list) => {
      setData(list)
  })
}, [])

您还可以删除多余的箭头函数，因为 setData 是一个需要单个参数的函数：

useEffect(() => {
  getInventory().then(setData)
}, [])

Answer 2

您不应该在组件主体中调用 setState 函数。

相反，您可以运行它在 useEffect。

useEffect(()=>{
    getInventory().then((list) => {
        setData(list)
    })    
}, [])

在 React Native 中使用 useState 无限重复更新 FlatList 数据

Updating FlatList data with useState infinitely recurs in React Native

reactjs

react-async

react-native

react-hooks

react-flatlist