如何从数组中的子组件向父组件传递数据？

导致这个错误的核心原因通常是循环渲染子组件时props传递错误，或者子组件内部错误覆盖了sendData变量。以下是具体的排查和解决步骤：

1. 检查父组件的props传递逻辑 #

确保在循环渲染子组件时，将sendData函数作为独立props传递给每个子组件，不要和数组项的属性混淆。

正确的父组件示例：

import { useState } from 'react';
import Child from './Child';

function Parent() {
  const [receivedData, setReceivedData] = useState([]);
  const childItems = [/* 你的子组件数据数组 */];

  // 定义向父组件传递数据的函数
  const sendData = (childData) => {
    setReceivedData(prev => [...prev, childData]);
  };

  return (
    <div>
      {/* 循环渲染时，给每个子组件传递sendData和对应的数据项 */}
      {childItems.map((item, index) => (
        <Child 
          key={index} // 建议用唯一标识作为key，比如item.id
          sendData={sendData} 
          item={item} 
        />
      ))}
      <p>父组件接收的数据：{JSON.stringify(receivedData)}</p>
    </div>
  );
}

export default Parent;

2. 确保子组件正确接收props #

子组件需要通过props获取父组件传递的sendData，不要在子组件内部重新定义sendData变量，否则会覆盖父组件传递的函数，导致非函数错误。

正确的子组件示例：

// 子组件通过解构props获取sendData和item
function Child({ sendData, item }) {
  const handleTrigger = () => {
    // 调用父组件传递的sendData函数
    sendData(`来自子组件的数据：${item}`);
  };

  return (
    <button onClick={handleTrigger}>向父组件传数据</button>
  );
}

export default Child;

3. 常见错误排查 #

• 传递props时变量名拼写错误：比如把sendData写成senddata（大小写敏感）。
• 循环时遗漏传递sendData：导致子组件的sendData为undefined，调用时就会报“not a function”。
• 子组件内部重新定义sendData：比如在子组件里写const sendData = ...，覆盖了父组件传递的props。

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