React 子组件函数调用失败，如何解决？

Question

React子组件函数调用失败：

export default function TodoList({ todos, toggleTodo, deleteTodo }) {
  return (
    <>
      {todos.length === 0 && <div>No Todos</div>}

      {/* 展示任务清单 */}
      <ul className="list">
        {todos.map((todo) => {
          return (
            <li key={todo.id}>
              <label>
                <input
                  type="checkbox"
                  checked={todo.completed}
                  onChange={(e) => toggleTodo(todo.id, e.target.checked)}
                />
                {todo.title}
              </label>
              <button
                className="btn btn-danger"
                onClick={() => deleteTodo(todo.id)}
              >
                delete task
              </button>
            </li>
          );
        })}
      </ul>
    </>
  );
}

父组件中展示：

/* eslint-disable no-unused-vars */
import React, { useState } from "react";
import "../styles.css";
import NewTodoForm from "./NewTodoForm";
import TodoList from "./TodoList";

// 抽离添加任务表单
export default function App() {
  const [todos, setTodos] = useState([]);

  function addTodos(title) {
    setTodos((current) => {
      return [
        ...current,
        { id: crypto.randomUUID(), title: title, completed: false },
      ];
    });
  }

  // 点击任务
  function toggleTodo(id, completed) {
    setTodos((current) => {
      return current.map((todo) => {
        if (todo.id == id) {
          return {
            ...todo,
            completed: completed,
          };
        } else {
          return todo;
        }
      });
    });
  }

  // 删除任务
  function deleteTodo(id) {
    setTodos((current) => {
      return current.filter((todo) => {
        return todo.id !== id;
      });
    });
  }

  return (
    <>
      <NewTodoForm addTodos={addTodos} />
      <h1 className="header">Todo List</h1>
      <TodoList todos={todos} />
      P2_App
    </>
  );
}

运行报错：

请问大家，这个是什么问题呢？

Answer 1

你在子组件 TodoList 中尝试使用 toggleTodo 和 deleteTodo 这两个函数，但在父组件 App 中渲染 TodoList 时忘记传递这些函数了。

这就像你给朋友一个工具箱，但里面少了两个他需要的工具，所以当他尝试使用这些工具时就会出错。

要解决这个问题，只需在父组件中把这两个函数一起传给子组件就可以了：

<TodoList
todos={todos}
toggleTodo={toggleTodo}
deleteTodo={deleteTodo}
/>

这样子组件就能收到全部它需要的东西，错误就会消失了。这是 React 中常见的沟通方式 - 父组件通过 props 把数据和函数传给子组件使用。

Answer 2

你需要把父组件里定义的函数传给子组件的属性，父组件里引用子组件改成下面这样就可以了

<TodoList todos={todos} toggleTodo={toggleTodo} deleteTodo={deleteTodo} />