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

Question

我试图用useState为平面列表设置数据，但更新状态会导致组件重新渲染，因此它再次调用getInventory函数并无限重复，导致应用程序崩溃。我使用的是函数组件，而不是类。如果我把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)
})    
}, [])