React子组件通过回调向父组件传值失败，求排查解决

尝试通过回调函数实现React子组件向父组件传递数据，但触发按钮时提示onDataFromChild is not a function，代码片段及错误信息如下：

App.js 代码 #

const [dataFromChild, setDataFromChild] = useState('');
const handleDataFromChild = (data) => {
    setDataFromChild(data);
}

function receiveChildData() {
    if (dataFromChild === undefined || dataFromChild.length === 0) {
     return null;
    } else {
      return <div><EmpView onDataFromChild={handleDataFromChild} /></div>;
    }
}

return (
    <div>
      <form onSubmit={handleSubmit}>
        <Select
          name="select"
          options={data}
          multi
          onChange={handleSelect}
        />
        <button type="submit">Submit</button>
      </form>
      <div>
        <EmpView
          key={JSON.stringify(nodeData)}
          nodeData={nodeData}
         />
      </div>
       {receiveChildData()}
    </div>
)
}
export default App;

Emp.js 代码 #

const EmpView = (nodeData,{onDataFromChild}) => {

    const [nodeDetails, setNodeDetails] = useState([]);
    
    const handleOnSelect = (item) => {
        console.log(item);
        axios.post("./searchEmp", item.id)
            .then((response) => {
                setNodeDetails(JSON.parse(response.data.nodeDetails));
            }).catch((error) => {
                console.log(error);
            });
    };
    const sendDataToParent=()=>{
        onDataFromChild(nodeDetails)
    }
    
return
(
    <div className='container'>
            <div style={{ marginBottom: 20 }}></div>
            <ReactSearchAutocomplete
                items={nodeNames}
                onSelect={handleOnSelect}
            />
            <button onClick={sendDataToParent}>Send Data to Parent</button>
            <Graph
                graph={graph}
                options={options}
            />
       </div>
    )
}
export default EmpView;

错误信息 #

onDataFromChild is not a function
TypeError: onDataFromChild is not a function

问题原因及修复方案 #

1. 子组件参数解构错误

React组件接收的props是单个对象，你错误地将nodeData和{onDataFromChild}拆成两个参数，导致onDataFromChild始终为undefined。

修复后的Emp.js参数部分：

// 改为解构单个props对象
const EmpView = ({nodeData, onDataFromChild}) => {

2. 父组件存在未传递回调的子组件实例

App组件的return中渲染了两个<EmpView>，其中一个未传递onDataFromChild属性，当该实例的按钮被点击时，必然触发“不是函数”的错误。

修复后的App.js对应部分：

<div>
    <EmpView
        key={JSON.stringify(nodeData)}
        nodeData={nodeData}
        onDataFromChild={handleDataFromChild} {/* 添加回调属性 */}
     />
</div>

3. 额外：子组件return语句的语法问题

原Emp.js中return后直接换行，会触发JS自动分号插入机制，导致实际返回undefined。需将return与括号放在同一行：

修复后的Emp.js return部分：

return ( // 括号紧跟return，避免自动分号插入
    <div className='container'>
        <div style={{ marginBottom: 20 }}></div>
        <ReactSearchAutocomplete
            items={nodeNames}
            onSelect={handleOnSelect}
        />
        <button onClick={sendDataToParent}>Send Data to Parent</button>
        <Graph
            graph={graph}
            options={options}
        />
   </div>
)

4. 可选优化：添加函数存在性判断

为避免父组件未传回调时报错，可在子组件的sendDataToParent中增加判断：

const sendDataToParent=()=>{
    if (typeof onDataFromChild === 'function') {
        onDataFromChild(nodeDetails);
    }
}

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