MERN待办应用报错：props.updateNewToDo不是函数求助

我正在开发一款支持添加、编辑、删除待办项的MERN待办应用，点击待办项的更新按钮会弹出模态表单。目前尝试让updateNewToDo函数生效，该函数用于从子组件获取信息更新数据库，但点击模态框的更新按钮时出现如下错误：

props.updateNewToDo is not a function
TypeError: props.updateNewToDo is not a function

相关代码 #

Home.js #

import React, { useEffect, useState } from 'react'

import ToDoList from '../components/ToDoList';

const Home = () => {
    const [toDos, setToDos] = useState(null);

    useEffect(() => {
        const fetchToDos = async () => {
          const response = await fetch("/api/ToDo");
          const json = await response.json();

          if (response.ok) {
            setToDos(json);
          }
        };
        fetchToDos();
      }, []);

  // 用于从子组件接收待办项更新信息的函数
      function updateNewToDo(id, Name){
        console.log("update the employee")
      }

  return (
    <div className='Home'>
        <div className='toDos'>
            {toDos && toDos.map((toDo) => <ToDoList key={toDo._id} props={toDo} id={toDo._id} updateNewToDo={updateNewToDo} />)}
        </div>
    </div>
  )
}

export default Home

ToDoList.js #

import React from "react";
import EditToDo from "./EditToDo";

const ToDoList = ( {props} ) => {
  return (
    <div className="toDoList">
      <h4>To Do: </h4>
      <p>{props.Name}</p>
      <span>delete</span>
      <EditToDo Name={props.Name} updateNewToDo={props.updateNewToDo} id={props._id} />
    </div>
  );
};

export default ToDoList;

EditToDo.js #

import { useState } from "react";
import Button from "react-bootstrap/Button";
import Modal from "react-bootstrap/Modal";

function EditToDo(props) {
  const [Name, setName] = useState(props.Name);
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Update
      </Button>

      <Modal
        show={show}
        onHide={handleClose}
        backdrop="static"
        keyboard={false}
      >
        <Modal.Header closeButton>
          <Modal.Title>Update To Do</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <form
            onSubmit={(e) => {
              e.preventDefault();
              console.log('Hello from EditToDo');
              console.log(props.id, Name)
              props.updateNewToDo(props._id, Name);
            }}
            id="editModal"
            className="w-full max-w-sm"
          >
            <div className="md:flex md:items-center mb-6">
              <div className="md:w-1/3">
                <label
                  className="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4"
                  for="name"
                >
                  To Do
                </label>
              </div>
              <div className="md:w-2/3">
                <input
                  className="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
                  id="name"
                  type="text"
                  value={Name}
                  onChange={(e) => {
                    setName(e.target.value);
                  }}
                />
              </div>
            </div>
          </form>
        </Modal.Body>
        <Modal.Footer>
          <button
            onClick={handleClose}
            className="bg-slate-400 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded"
          >
            Close
          </button>

          <button
            form="editModal"
            className="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded"
          >
            Update
          </button>


        </Modal.Footer>
      </Modal>
    </>
  );
}

export default EditToDo;

报错根源是ToDoList组件的props解构错误：

• 在Home组件中，你给ToDoList传递了三个独立的props：props（待办项数据）、id、updateNewToDo函数
• 但ToDoList只解构了{props}，导致updateNewToDo和id没有被正确提取，反而误把它们当成了props（待办项数据对象）的属性——而待办项数据里根本没有updateNewToDo方法，自然会报错。

步骤1：修正ToDoList.js的props解构 #

修改组件参数，正确解构所有需要的props，同时为避免命名混淆，把原props重命名为todoData：

import React from "react";
import EditToDo from "./EditToDo";

const ToDoList = ({ props: todoData, updateNewToDo, id }) => {
  return (
    <div className="toDoList">
      <h4>To Do: </h4>
      <p>{todoData.Name}</p>
      <span>delete</span>
      <EditToDo Name={todoData.Name} updateNewToDo={updateNewToDo} id={id} />
    </div>
  );
};

export default ToDoList;

步骤2：修正EditToDo.js的参数错误 #

在表单提交函数中，你传递给EditToDo的是id，不是_id，所以要把props._id改成props.id：

props.updateNewToDo(props.id, Name);

完成以上修改后，updateNewToDo函数就能正常传递到子组件，解决报错问题。

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