太多的重新渲染。尝试更新数组状态的对象时

Question

我正在尝试编写待办事项列表。我有一个包含所有任务作为对象的数组。 每个任务都有一个名为“已检查”的属性，以指示我是否已检查此任务。 当一个任务被检查时，我有 onClicked 函数，它改变了数组中指定任务的“检查”属性，在这一点上我有一个“重新渲染太多”的错误。 希望得到你的帮助..

import { useEffect, useState } from "react";
import react from "react";
import "./styles.css";

export default function ToDoList() {
  const [allTasks, setAllTasks] = useState([]);
  const [newTask, setNewTask] = useState({ value: "" });
  const [currentIndex, setCurrentIndex] = useState(0);

  const handleChanged = ({ target }) => {
    setNewTask({
      value: target.value,
      id: currentIndex,
      checked: false
    });
  };

  function onClicked() {
    if (newTask.value === "") return;
    setAllTasks((prev) => {
      return [newTask, ...prev];
    });
    setNewTask({ value: "" });
    setCurrentIndex((prevCurrentIndex) => prevCurrentIndex + 1);
  }

  const handleKeyPress = (event) => {
    if (event.keyCode === 13) {
      onClicked();
    }
  };

  const onCheck = (i) => {
    const task = { ...allTasks[i] };
    task.checked = !task.checked;

    const taskState = [...allTasks];
    taskState[i] = task;

    setAllTasks(taskState);
  };

  return (
    <div>
      <h1>
        <u>
          <b>To Do List</b>
        </u>
      </h1>
      <input
        value={newTask.value}
        onChange={handleChanged}
        onKeyDown={handleKeyPress}
      />
      <button onClick={onClicked} />
      <h1>{newTask.value}</h1>
      <lo>
        {allTasks.map((item, i) => (
          <li>
            {item.checked ? (
              <input type="checkbox" checked={true} onClick={onCheck(i)} />
            ) : (
              <input type="checkbox" checked={false} onClick={onCheck(i)} />
            )}

            {item.value}
          </li>
        ))}
      </lo>
    </div>
  );
}

Answer 1

在渲染后立即调用onCheck 函数（使用函数的result，即undefined，作为实际的点击处理程序）：

onClick={onCheck(i)}

哪个更新状态，哪个触发重新渲染，哪个调用函数，哪个更新状态等等等等。

在渲染期间不要立即调用onCheck。当用户点击元素时调用它，方法是将其包装在一个函数中：

onClick={() => onCheck(i)}

这会将函数本身设置为点击处理程序，并且仅在发生这种情况时调用该函数。