时间戳

首页 > 解决方案 > 仅在重新渲染后才获取数据，但是由于在屏幕安装时仅运行一次，因此 useEffect 代码未运行

react-native - 仅在重新渲染后才获取数据，但是由于在屏幕安装时仅运行一次，因此 useEffect 代码未运行

问题描述

在我的 react-native 项目中，我有一个屏幕需要data从后端查询，然后，有一些使用后端返回的代码data应该只在屏幕安装时运行一次。这就是我所做的（我正在使用 [react-query][1] 从后端获取数据）：

const MyScreen = ()=> {
   // fetch data from backend or cache, just think this code gets data from backend if you don't know react-query
   const {status, data, error} = useQuery(['get-my-data'], httpClient.fetchData);

   // these code only need to run once when screen mounted, that's why I use useEffect hook.
   useEffect(() => {
      // check data
      console.log(`data: ${JSON.stringify(data)}`);
      
      // a function to process data
      const processedData = processeData(data);
      
      return () => {
        console.log('Screen did unmount');
      };
   }, []);

   return (<View>
            {/* I need to show processed data here, but the processedData is scoped in useEffect hook & I need to have the process data function in useEffect since only need it to be run once */}
           </View>)
}

我的问题：

中的代码useEffect仅在安装屏幕时运行一次，但是此时上面的查询返回data值undefined，直到重新渲染发生，data然后被提取但是里面的代码useEffect将永远不会再次运行，尽管在重新渲染时获取了数据。我怎样才能摆脱这个问题？

标签： react-nativereact-hooksuse-effectreact-query

解决方案

在不知道 httpClient.fetchData 到底是什么的情况下，我只能假设它会返回一个 res.json。你应该能够做这样的事情。

   const {status, data, error} = useQuery(['get-my-data'], httpClient.fetchData).then((res)=>{processData(res)});

有了这个，data现在应该成为processedData你的例子。

推荐阅读