函数调用后反应状态不更新答案

【问题标题】：React state not updating after function call函数调用后反应状态不更新
【发布时间】：2021-05-01 11:58:20
【问题描述】：

我正在尝试在进行更改之前更新我的反应状态，但它没有更新。更改状态是异步的，但我不知道如何在下面的代码示例中更新上下文中的状态：

const initialState = {
    user: null
}

const [state, dispatch] = useReducer(reducer, initialState);

const updateUser = async () => {
    const res = await axios.get('currentUser')
    //res.data.user is the user stored in the database
    dispatch({ type: SET_USER, payload: res.data.user })
}

const getUser = async () => {
    try {
        await updateUser()
        if(state.user) {
            console.log('User is not null')
        } else {
            console.log('User is null')
        }
    } catch (err) {
        //Handle error
    }

}

这里是减速器：

export default (state, action) => {
    { ... }
    case SET_USER: return { ...state, user: action.payload }
    { ... }
}

我正在使用 useEffect 钩子在我的组件中调用 getUser 函数：

useEffect(() => {
    getUser()
}, [])

此代码示例始终返回 User is null，因为调用 updateUser 函数时状态未更新。

注意：这是上下文和 reducer 的简单版本

【问题讨论】：

这可能是一个愚蠢的问题，但你检查过res.data.user 吗？另外，如果您在我们进行任何扣除之前发布完整代码会更好
是 res.data.user 返回我存储在数据库中的用户。对象不为空。这就是与这两个功能相关的一切，其余的与用户本身无关。

标签： reactjs react-hooks state reducers

【解决方案1】：

您正在等待获取，但尚未更新状态。

useEffect(() => {
  getUser()
}, [])

useEffect(() => {
  if(state.user) {
        console.log('User is not null')
    } else {
        console.log('User is null')
    }
}, [state.user])

【讨论】：