React父组件向子组件传递函数不生效触发报错问题排查

首次在此提问，若提问格式不符合规范还请谅解。我在开发React待办事项应用时，尝试将App.jsx中定义的addTodo函数传递给Input子组件，期望实现点击按钮时更新App组件内的待办列表状态，但代码运行后抛出错误，相关代码如下：

App.jsx 代码 #

import { useState } from "react";
import "./App.css";
import Todos from "./components/Todos";
import Input from "./components/Input";

function App() {
  const [todos, setTodos] = useState([]);
  let startingId = 1;

  function addTodo(title) {
    if (title) {
      setTodos((prev) =>
        prev.push({
          id: startingId++,
          title: title,
          createdAt: new Date().toLocaleTimeString(),
          isComplete: false,
        })
      );
    }
    return;
  }
  return (
    <div className="app">
      <Input addTodo={addTodo} />
      <Todos todos={todos} />
    </div>
  );
}

export default App;

Input.jsx 代码 #

import { useState } from "react";

function Input({ addTodo }) {
  const [todoInp, setTodoInp] = useState("");

  return (
    <div className="input mt-4 mb-5">
      <div className="input-group mb-3 container-lg">
        <input
          type="text"
          className="form-control"
          placeholder="Recipient's username"
          aria-label="Recipient's username"
          aria-describedby="button-addon2"
          value={todoInp}
          onInput={(e) => setTodoInp(e.target.value)}
        />
        <button
          className="btn btn-outline-primary"
          type="button"
          id="button-addon2"
          onClick={addTodo(todoInp)}
        >
          Add Todo
        </button>
      </div>
    </div>
  );
}

export default Input;

错误原因与修复方法 #

代码里一共有两个核心问题会导致运行报错：

• 事件绑定写法错误：onClick={addTodo(todoInp)}会在组件每次渲染时立即执行addTodo函数，触发状态更新后组件重渲染，再次执行addTodo形成无限循环。需要改为传入箭头函数包裹的回调，仅在点击触发时执行：

  onClick={() => addTodo(todoInp)}
  

• 状态更新违反不可变原则：Array.push()会直接修改原状态数组，且返回值是数组长度而非新数组，会导致状态更新异常。需要返回全新的数组作为新状态：

  setTodos((prev) => [
    ...prev,
    {
      id: startingId++,
      title: title,
      createdAt: new Date().toLocaleTimeString(),
      isComplete: false,
    }
  ])
  

补充说明：感谢大家的快速回复，我花费了较长时间攻克该作业，目前已顺利完成。

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