如何从 React native 中的 API 调用副作用更新我的状态？答案

【问题标题】：how do I update my state from an API call side Effect in React native?如何从 React native 中的 API 调用副作用更新我的状态？
【发布时间】：2023-01-09 03:06:55
【问题描述】：

我有一段代码使用 useEffect 挂钩从 Firebase 存储中获取文件列表的元数据。然而，我很难在这个 useEffect 中更新我的状态。我已经使用 async/await 模式来减轻 setState 的异步性质，但收效甚微。

我的 sn-p 伪代码：

const [someData,setSomeData]=useState([])
const dataArray=[]

useFocusEffect(
    useCallback(()=>{
        async function getData(){
            const result=await listAll(storageRef);
            await result.items.map(async (itemRef)=>{
                const Metadata=await getMetadata(itemRef);
                await dataArray.push({'name':Metadata.name})
                await console.log(dataArray) //shows the array being populated on each iteration
            })
            await setSomeData(dataArray);
            await console.log(someData) // I'm expecting it to print an updated state, prints an empty array instead
            }
            getData()
        },[])
    )

我似乎也无法访问代码返回部分中的状态：

return(
    {someData.map(({item})=>{
        return(
            <View><Text>{item.name}</Text><View>)})

据我所知，什么都不输出。

我的方法缺少什么？

提前致谢

【问题讨论】：

标签： firebase react-native react-native-firebase

【解决方案1】：

setSomeData() 不返回承诺，因此无法等待。
dataArray 需要限定在 getData() 内
getData 在 someData 周围关闭，因此它永远不会获得更新的值因为该函数调用指的是先前的值
使用react native compatible async data library可能更容易

【讨论】：