从 UseContext 值初始化 UseState 值答案

【问题标题】：Init UseState value from UseContext value从 UseContext 值初始化 UseState 值
【发布时间】：2021-11-13 20:16:25
【问题描述】：

我有上下文和状态变量。我的状态变量是用我的上下文变量初始化的。例如，当我在另一个组件中更新我的上下文：更改玩家的动作（从攻击到防御）时，state 变量保持之前的值。

const [player,setPlayer] = useContext(PlayerContext);
const [action, setAction] = useState(player.action); 

useEffect(() => {
    console.log(action); // => attack
    console.log(player.action); // => defend
});

这肯定是渲染问题。

【问题讨论】：

标签： reactjs

【解决方案1】：

如果您希望action 状态变量反映对player.action 的更新，您需要确保您的依赖数组（useEffect 的第二个参数）包含player.action（以便它仅在值更改时运行)，然后显式调用setAction：

useEffect(() => {
   if (player.action !== action) {
      setAction(player.action);
   }
}, [player.action])

React 文档有一个关于 Using the Effect Hook 的详尽指南，以及 useEffect hook API reference 可能会有所帮助。

【讨论】：

我想到了这个技巧，但我不认为将 player.action 作为 useEffect 的依赖项！ @甜甜圈

【解决方案2】：

渲染组件后，您的上下文状态在某处发生了变化。因此组件状态不再与上下文状态同步。使用浏览器调试器，您可以检查此行为并找出更改的位置。

作为一般规则，您应该避免添加组件状态，当它只反映上下文的状态时，直接在组件内部使用上下文。

【讨论】：