时间戳

首页 > 解决方案 > 从 UseContext 值初始化 UseState 值

reactjs - 从 UseContext 值初始化 UseState 值

问题描述

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

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

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

这肯定是一个渲染问题。

标签： reactjs

解决方案

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

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

React 文档有一个关于使用 Effect Hook的广泛指南，它可能会有所帮助，以及useEffecthook API 参考。

推荐阅读