React子组件无法从Props正确初始化State问题求助

问题核心原因 #

你遇到的问题本质是：useState的初始值仅在组件首次挂载时生效一次，后续父组件更新props后，子组件的state不会自动同步。另外你看到的console.log输出顺序可能误导了你——组件首次渲染时，props是初始的emptyObject（id/name为空字符串），此时useState用空字符串初始化state；当父组件异步请求完成更新props后，子组件重新渲染，解构能拿到新的props值，但useState的初始值不会重新执行，若你没手动同步，state还是首次初始化的旧值。

最佳解决方案：避免子组件维护重复state #

如果子组件的表单仅用于展示和修改props的值，最终要同步回父组件，优先推荐直接使用props+父组件回调，完全不需要在子组件维护重复state，这是React的最佳实践，能彻底避免同步问题：

父组件代码修正

interface MyObject {
  id: string;
  name: string;
  timestamp: string;
}

const emptyObject: MyObject = {
  id: '',
  name: '',
  timestamp: ''
};

function ParentComponent({ propName }: { propName: string }) {
  const [myObject, setMyObject] = useState<MyObject>(emptyObject);

  useEffect(() => {
    // 注意：这里应该传递propName给foo，否则无法根据查询条件获取数据
    foo(propName).then((x) => {
      // 合并更新，保留原有结构
      setMyObject(prev => ({ ...prev, ...x }));
    });
  }, [propName]);

  // 定义回调函数，让子组件可以更新父组件的state
  const handleFieldChange = (key: keyof MyObject, value: string) => {
    setMyObject(prev => ({ ...prev, [key]: value }));
  };

  return (
    <>
      <ChildComponent obj={myObject} onFieldChange={handleFieldChange} />
    </>
  );
}

子组件代码修正

function ChildComponent({ 
  obj, 
  onFieldChange 
}: {
  obj: MyObject;
  onFieldChange: (key: keyof MyObject, value: string) => void;
}) {
  const { id, name } = obj;

  return (
    <form>
      <input 
        value={id}
        onChange={(e) => onFieldChange('id', e.target.value)}
        placeholder="ID"
      />
      <input 
        value={name}
        onChange={(e) => onFieldChange('name', e.target.value)}
        placeholder="Name"
      />
    </form>
  );
}

备选方案：必须在子组件维护state时的同步方法 #

如果业务场景确实需要子组件独立维护state，需确保props变化时手动同步到state，注意以下两点：

1. 监听props的具体字段（而非整个对象），避免不必要的重渲染
2. 增加判空逻辑，防止异步返回值异常导致的undefined

function ChildComponent({ obj }: { obj: MyObject }) {
  const { id, name } = obj;
  const [myId, setMyId] = useState(id);
  const [myName, setMyName] = useState(name);
  
  // 监听props字段变化，同步到state
  useEffect(() => {
    if (obj.id !== undefined) setMyId(obj.id);
    if (obj.name !== undefined) setMyName(obj.name);
  }, [obj.id, obj.name]);

  return (
    <form>
      <input value={myId} onChange={(e) => setMyId(e.target.value)} />
      <input value={myName} onChange={(e) => setMyName(e.target.value)} />
    </form>
  );
}

额外注意事项 #

1. 检查foo函数的参数：你之前传递的是emptyObject，这大概率是笔误，应该传递propName作为查询条件，否则无法获取对应的数据。
2. 父组件无需嵌套两个useEffect，直接在一个useEffect中更新myObject即可，多此一举的嵌套反而可能引发不必要的渲染。

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