React 状态在视觉上得到更新，但是通过 useContext 访问时状态变量没有得到更新

Question

有很多关于状态未更新的不同帖子，但我没有找到任何适用于我的案例的帖子。

在我的index.js文件中，我有 2 个useState钩子，所有组件都包含在<Context.Provider>标记中，其状态值和设置器如下所示：

                <Context.Provider
                    value={{
                        state1,
                        setState1,
                        state2,
                        setState2,
                    }}
                >
                    <OtherComponent1 />
                    <OtherComponent2 />
                </Context.Provider>

在另一个组件中，我从上下文中导入了值，如下所示：

    const {
        state1,
        setState2,
        state2,
        setState2,
    } = useContext(Context);

我可以完美地使用状态和状态设置器，除了设置状态时，我可以看到视觉上的变化，除了变量值没有变化。

state1是一个数组，当我执行setState1(updatedArray)时，我可以直观地看到状态已更新，但是当我使用console.log(state1)时，我仍然只看到state1的原始值，而不是updatedArray 。 我怎样才能解决这个问题？

此外，当我执行useEffect(() => console.log(state1), [state1])时，我看到state1的正确更新值。 这让我更加困惑，因为这是我唯一可以看到state1正确值的地方，但我需要其他地方的正确值。

Answer 1

正如 Ivo 提到的，您应该在函数外部使用控制台日志来检查 teamRankings 的状态。 该函数保存先前的数据，并通过扩展控制台日志打印先前的状态。 这就是 useEffect 起作用的原因，因为它检查状态是否已更改并重新运行效果