React子组件表单数据无法传递至父组件，提交时显示undefined求助

问题原因 #

核心问题是父组件传递给子组件的onSubmit回调未接收子组件传递的表单参数：

• 子组件handleSubmit中调用props.onSubmit(fh, El)，会把输入的两个值传给父组件
• 但父组件里写的是onSubmit={() => editData(obj.id)}，只传了id，未接收fh和El，导致editData里的ehe和ela参数为undefined

另外还有两个次要问题：

• 父组件中使用了未定义的checkedItems变量，会触发报错
• 直接使用myArray更新状态可能存在闭包问题，无法获取最新状态值

解决方案 #

1. 修正父组件的onSubmit回调参数传递 #

修改父组件中渲染SetEdit的部分，接收子组件传来的两个参数并传给editData：

<SetEdit className="editComp" onSubmit={(fh, El) => editData(obj.id, fh, El)} />

2. 优化状态更新逻辑（推荐） #

为避免闭包导致的旧状态问题，更新myArray时改用函数式更新：

const editData = (id, ehe, ela) => {
  console.log(id);
  console.log("-->"+ehe);
  
  setmyArray(prevArray => prevArray.map(obj => {
    if(obj.id === id){
      return {...obj, todoname: ehe, todotoday: ela}
    }else{
      return obj;
    }  
  }));
}

3. 修复未定义变量问题 #

补充定义checkedItems状态（如果是你遗漏的逻辑）：

const [checkedItems, setCheckedItems] = useState([]);

完整修正后的父组件代码片段 #

const Main = () => {
  const todoData = [
    {id:0,todoname:"Study",todotoday:"Completing CSS today"},
    {id:1,todoname:"Coding",todotoday:"Leetcode 2 Problems"}
  ];

  const [onEdit,setonEdit] = useState([]);
  const [myArray,setmyArray] = useState(todoData);
  // 补充定义checkedItems状态
  const [checkedItems, setCheckedItems] = useState([]);

  const editData = (id, ehe, ela) =>{
    console.log(id);
    console.log("-->"+ehe);
    
    // 使用函数式更新获取最新状态
    setmyArray(prevArray => prevArray.map(obj =>{
      if(obj.id === id){
        return {...obj,todoname:ehe,todotoday : ela}
      }else{
        return obj;
      }  
    }));
  }

  return(
    <div>
      {myArray.map((obj)=>{
        return ( 
          <div className="todocont" key={obj.id}>
            <div className="todobox"  style={{opacity: checkedItems.includes(obj.id) ? 0.2 : '', }}>
              <h2 className="head" >Todo: {obj.todoname}</h2>
              <h3 className="todocont">{obj.todotoday}</h3>
              <div className="todoboxbtn">
                <TodoIcon  />
              </div>
            </div>
            <div className="editInput">
              {/* 修正onSubmit回调，接收子组件传来的参数 */}
              <SetEdit className="editComp" onSubmit={(fh, El) => editData(obj.id, fh, El)}/>
            </div>
          </div>
        )
      })}
    </div>
  )
}

内容的提问来源于stack exchange，提问作者Akash Kr. Das