React子组件向父组件传值延迟一步问题求助

问题原因 #

• 拼写错误：App组件中传递给Child的setChldData是笔误，正确应为setChildData，这会导致父组件无法接收数据
• useState异步更新：React的useState更新函数是异步执行的，调用setData后立即读取Data拿到的是更新前的旧值，因此传给父组件的数据总是慢一步
• 双状态冗余：子组件自行维护Data状态再同步给父组件，这种模式容易引发状态不一致，违背React单向数据流设计

最优解决方案：状态提升 #

将状态统一托管在父组件App中，子组件仅负责渲染输入框并触发更新通知，天然保证数据同步：

修复后的App组件

function App() {
  const [childData, setChildData] = useState({ name: '', title: '', phone: '' });
  
  return (
    <div>
      <Child data={childData} passData={setChildData} />
      <div>{childData.name}</div>
    </div>
  )
}

修复后的Child组件

function Child(props) {
  const handleChange = (e) => {
    // 基于父组件传入的最新数据生成新状态，通知父组件更新
    const newData = { ...props.data, [e.target.name]: e.target.value };
    props.passData(newData);
  }

  return (
    <div>
      <h2>Child Data</h2>
      <input 
        type="text" 
        name='name' 
        value={props.data.name} 
        onChange={handleChange} 
        placeholder="Name"
      />
      <input 
        type="text" 
        name='title' 
        value={props.data.title} 
        onChange={handleChange} 
        placeholder="Title"
      />
      <input 
        type="number" 
        name='phone' 
        value={props.data.phone} 
        onChange={handleChange} 
        placeholder="Phone number"
      />
    </div>
  )
}

保留子组件状态的替代方案（不推荐） #

若必须让子组件维护自身状态，可通过useEffect监听状态变化后同步给父组件，或使用函数式更新获取最新状态：

function Child(props) {
  const [data, setData] = useState({ name:'' ,title:'' ,phone:'' });
  
  // 监听data变化，同步到父组件
  useEffect(() => {
    props.passData(data);
  }, [data, props.passData]);

  const handleChange = (e) => {
    // 函数式更新获取最新状态
    setData(prevData => ({
      ...prevData,
      [e.target.name]: e.target.value
    }));
  }

  return (
    <div>
      <h2>Child Data</h2>
      <input type="text" name='name' value={data.name} onChange={handleChange} placeholder="Name"/>
      <input type="text" name='title' value={data.title} onChange={handleChange} placeholder="Title"/>
      <input type="number" name='phone' value={data.phone} onChange={handleChange} placeholder="Phone number"/>
    </div>
  )
}

注意：此方案需同时修正App组件中的setChldData为setChildData。

总结 #

优先选择状态提升方案，这是React解决父子组件数据同步的标准实践，能从根源避免状态不一致，代码更简洁易维护。

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