在 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);
            });
    } )

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

Answer 1

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

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 在其依赖数组中设置了数据状态。这意味着如果依赖数组的值发生变化，它将触发副作用。

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

Wait for axios response before execute code in useEffect

javascript

dom-events

reactjs

react-hooks