使用useContext值初始化的useState为何在Context更新后不同步

useState 的初始赋值逻辑仅会在组件首次挂载渲染时执行一次，后续组件因其他触发源重渲染时，useState 会直接返回当前保存的状态值，忽略你传入的新初始值。
你当前的代码里仅在组件第一次渲染时，把当时 Context 里的 player.action 赋值给了本地状态 action，后续 Context 内容更新触发组件重渲染时，useState 不会主动把最新的 player.action 同步给 action，就出现了二者值不一致的情况。

可根据你的业务场景选择以下任意一种方案：

• 方案1：直接复用 Context 值，不额外声明本地状态
  如果你当前组件不需要独立修改 action 的值，action 完全依赖 Context 状态，那不需要额外声明本地的 action 状态，直接使用 player.action 即可，它会自动跟随 Context 内容实时更新。
• 方案2：监听 Context 变化，主动同步到本地状态
  如果你当前组件确实需要独立维护 action 状态（比如支持用户临时调整操作，确认后再同步回 Context），可以新增 useEffect 监听 player.action 的变化，主动更新本地状态：

  const [player,setPlayer] = useContext(PlayerContext);
  const [action, setAction] = useState(player.action); 
  
  // 新增同步逻辑
  useEffect(() => {
    setAction(player.action);
  }, [player.action]);
  

• 方案3：通过 key 重置组件（仅适用于轻量组件）
  如果该组件逻辑较轻、重挂载开销低，可以在调用组件的地方给组件绑定动态 key，当 player.action 变化时更新 key 值，让组件重新走挂载流程，自然会重新初始化 action 状态：

  <YourComponent key={player.action} />
  

内容的提问来源于stack exchange，提问作者TheMilion