时间戳

首页 > 解决方案 > 异步函数后变量未初始化

reactjs - 异步函数后变量未初始化

问题描述

我提出这样的要求：

    const createProgramari = async () => {
        let prog = [];
        try {
            await axios.get('http://localhost:8000/api/programariByDentistID', {
                params: {
                    id: JSON.parse(localStorage.getItem('user'))["id"]
                }
            })
                .then(function (res) {
                    console.log(res);
                    if(res.status === 200) {
                        prog = res.data;
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            setProgramari(prog);
        } catch(e) {
            console.log(e);
        }
    }

如果我尝试在我的 useEffect 中看到这个，变量“programari”是一个空数组（我初始化它的值）

    const [programari, setProgramari] = useState([]);

    useEffect( () => {
        // code to run on component mount
        createProgramari();
        console.log(programari);
    }, [])

我尝试打印响应并且 axios 正确。我究竟做错了什么？有没有一个地方我可以学习如何不犯同样的错误？

标签： reactjs

解决方案

这里的重点是setProgramari本质上是异步的。如果它被调用，并不一定意味着它会立即执行。您可以处理此问题的一种方法如下。


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

// consider useMemo or useCallback based on your use case if need be
useEffect(() => {
  // whatever logic you want to have
  console.log(programari); // will get new value always
}, [programari])

推荐阅读