上下文状态不更新

Question

我是上下文 api 的新手，我尝试通过向减速器发送调度来更新上下文状态，但是当我记录状态时，我得到了默认状态。然而，当我在 React 开发工具中检查时，我发现状态确实有一个改变的状态，但它只是没有在控制台中将它注销，我做错了什么吗？

const State = ({ children }) => {
const initState = {
    trending: [],
    search: []
}
const [state, dispatch] = useReducer(Reducer, initState)

useEffect(() => {
    console.log(state.trending) //returns []
    dispatch({ type: 'LOAD_TRENDING', payload: ['some Data'] })
    console.log(state.trending); // returns [] instead of ['some Data']
    },
 [])}

Answer 1

您需要将 state.trending 放在 useEffect 中的依赖项数组中。所以你可能看起来像：

    useEffect(() => {
        console.log(state.trending) //returns []
        console.log(state.trending); // returns [] instead of ['some Data']
      },
    [state.trending]) // this is new
    }

还将分派移动到单独的 useEffect 以避免无限渲染。

useEffect(() => {
     dispatch({ type: 'LOAD_TRENDING', payload: ['some Data'] })
    },
 [])}