React子组件props更新后内部useState值未同步的问题求解

问题核心原因 #

React的useState钩子传入的参数仅作为组件首次挂载时的初始值，后续组件更新时，即使传入的参数发生变化，useState也不会再重新读取这个值更新内部状态，这就是你遇到问题的根本原因。

你原始代码的两个子组件行为分别是： #

• Message 2对应的<MyComponent>是通过display属性控制显隐，组件从首次渲染后就没有被卸载过，所以它内部的counter状态永远是首次挂载时读取的初始值0，后续props.value变化也不会触发内部state更新，永远显示0。
• Message 1对应的<MyComponent>是通过条件渲染控制显隐，当counter等于1时组件会被卸载，counter等于2时会重新挂载，理论上此时重新挂载会读取最新的value=2，但和始终不更新的Message 2放在一起会明显出现数值不一致的问题。

加key后生效的原理 #

React通过key属性来区分列表/相同类型组件的实例，当你把counter作为key传给子组件时，每次counter变化，React都会判定这是一个全新的组件，会销毁旧的组件实例，重新创建新的实例，新实例挂载时会读取最新的props.value作为useState的初始值，所以显示就正常了。

更合理的解决方案 #

如果你的子组件不需要独立维护这个counter状态，完全依赖父组件传值的话，不需要在子组件内额外声明state，直接使用props.value即可：

const MyComponent = ({ value }) => {
  return <span>{value}</span>;
};

如果确实需要子组件将传入的value作为初始状态，后续内部自主维护状态的话，可以用useEffect监听value的变化同步内部state：

const MyComponent = ({ value }) => {
  const [counter, setCounter] = useState(value);
  useEffect(() => {
    setCounter(value)
  }, [value])
  return <span>{counter}</span>;
};

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