时间戳

首页 > 解决方案 > 我无法在回调 axios 中更改状态（我使用了 useEffect、useState、axios）

reactjs - 我无法在回调 axios 中更改状态（我使用了 useEffect、useState、axios）

问题描述

function User() {
    const [user, setUser] = useState({})

    useEffect(() => {
        const user-token = window.localStorage.getItem('user-token');
        const getUser = async () => {
        if (user-token !== null) {
            const user = await axios.get('http://localhost:5000/api/index/info')

            setUser(user.data.info)
            console.log(user.data.info) // server return result is what I expected: {name: "hanh", age: 20}
            console.log(user) // but this is not change, it still {} 
        }

        getUser()
    }, []
}

标签： reactjsaxiosreact-hooks

解决方案

那是因为setUser异步运行，并且console.log(user)在状态更新之前被执行。

您可以useEffect用来检查状态是否已更新。

例如：

useEffect(() => {
  console.log(user)
}, [user])

每次用户更改时都会执行效果

如果您想在每次状态更改时都有一个回调，那么您可以编写 customHook 如下

function useStateWithCallBack(initlaValue, callBack) {
  const [state, setState] = useState(initlaValue);
  useEffect(() => callBack(state), [state]);
  return [state, setState];
}

customHook你可以在这个沙箱中找到一个这样的工作示例：

推荐阅读