React Hooks父子组件props状态双向同步的正确实现与死循环判定

结论：这段代码不会触发无限循环，但存在多处错误，完全无法实现预期的父子状态同步需求。 #

问题原因拆解：

1. 父组件状态更新逻辑错误
   你在父组件的onChange方法里直接修改了state对象的属性container.name = payload.name，没有调用React提供的setContainer方法触发状态更新。这种直接修改state的写法属于React严格禁止的用法，父组件的状态不会真正更新，也不会触发重渲染，自然不会产生父子组件循环重渲染的可能。
2. 子组件无法响应父组件prop变更
   子组件的name状态仅在初始化时赋值为container.name，后续父组件的container如果真的发生变更，子组件的本地状态也不会同步更新，不符合你要求的“父组件prop变更时同步响应到子组件”的需求。

如果修复父组件的状态更新逻辑，会不会触发无限循环？

就算你把父组件的onChange改成正确的写法：

const onChange = (payload) => {
  setContainer(prev => ({ ...prev, name: payload.name }))
}

也不会触发无限循环，完整的更新链路是：

• 用户输入修改子组件name状态
• 监听name的useEffect触发，调用dispatch通知父组件更新
• 父组件setContainer更新状态后重渲染，给子组件传入新的container
• 子组件如果加了监听container.name的同步逻辑，会调用setName将本地状态更新为最新的prop值，此时新的name值和prop值完全相等，不会触发二次重渲染，链路直接断开，不会形成循环。

符合需求的完整修正代码：

// 父组件
const ParentComponent = () => {
  const [container, setContainer] = useState({ name: 'hello'});

  const onChange = (payload) => {
    // 必须调用setState返回新对象才会触发更新
    setContainer(prev => ({...prev, name: payload.name}))
  }
  return (
    <ChildComponent container={container} dispatch={onChange} />
  );
};

// 子组件
const ChildComponent = (props) => {
  const { container, dispatch } = props;
  const [name, setName] = useState(container.name);

  // 监听父组件prop变更，同步更新本地状态
  useEffect(()=>{
    setName(container.name);
  },[container.name]);

  // 本地状态变更同步到父组件
  useEffect(()=>{
    const payload = { name };
    dispatch(payload);
  },[name, dispatch]);

  return (
    <input value={name} onChange= {(e)=>setName(e.target.value)} />
  );
};

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