在 useEffect 中执行代码之前等待 axios 响应

Question

我正在尝试将事件侦听器注册到我的useEffect钩子中，就像这样

               useEffect(() => {
               const dataFromAxios = await axios.get('/axios-data');
               window.addEventListener('load', () => {
                console.log("Action for load")

                window.addEventListener("focus", (e) => {
                    console.log("Action for focus")
                }, false);

                window.addEventListener("message", async (e) => {
                    const { data: dataFromMessage } = e;
    
                    if (dataFromMessage) { // true or false

                        if (dataFromAxios && dataFromMessage.isUserExist) {
                            window.location.reload();
                        }
                    } 
                    }
                }, false);
            });
    } )

但是在注册addEventListener之前我需要dataFromAxios 。 我该如何处理并在执行代码之前等待 axios 数据？

Answer 1

必须在useEffect中添加一个异步函数，它会立即执行，然后检查数据是否定义并在if条件中执行事件监听器。 一篇关于如何在useEffect中使用async await的文章链接

Answer 2

这样，您可以在数据准备好后添加事件侦听器。

const [data, setData] = useState(null);
const getData = async ( ) => {
    const dataFromAxios =  await axios.get('/axios-data');
    setData(dataFromAxios);
}

useEffect(() => {
   getData();
}, []);

useEffect(() => {
   if(data) {
      // do what you want with the data here
   }
}, [data])

上面的代码做了：

• 第一次绘制后获取数据
• 如果获取数据，则添加事件侦听器

第二个 useEffect 在其依赖数组中设置了数据状态。 这意味着如果依赖数组的值发生变化，就会触发副作用。