React子组件向父组件传值失败：数据未同步问题排查

1. 子组件Props接收方式错误 #

你的Container组件直接将参数当作childToParent函数，但React组件的参数是props对象，并非单个函数。当前写法下，childToParent实际指向整个props对象，调用它会直接报错（对象无法作为函数执行）。

修复写法：

const Container = ({ childToParent }) => {
  // ... 剩余代码
}

2. useEffect内部逻辑未执行 #

你在useEffect里定义了一个匿名箭头函数，但没有调用它，导致childToParent永远不会触发。直接将调用逻辑写在useEffect回调内即可，同时记得补全依赖数组：

React.useEffect(() => {
  childToParent({ config });
}, [config, childToParent]);

3. 确保config是响应式状态 #

你提到config来自API调用，必须用useState管理它的状态，这样当API返回数据更新config时，useEffect才会触发。示例：

const Container = ({ childToParent }) => {
  const [config, setConfig] = React.useState(null);

  // API调用获取config
  React.useEffect(() => {
    fetch('/api/config')
      .then(res => res.json())
      .then(data => setConfig(data));
  }, []);

  // config更新时通知父组件
  React.useEffect(() => {
    if (config) { // 避免初始null值传递
      childToParent({ config });
    }
  }, [config, childToParent]);

  return <div>...</div>;
}

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