功能不起作用，道具已通过

Question

我的 completeTodo 和 removeTodo 函数都不起作用，但我已将道具传递给 Todo 函数和 App.js 中呈现的 Todo 组件。任何人都知道我的两个功能或任何东西有什么问题，请帮助我！非常感谢！

import React, { useState } from "react";

function Todo({ todo, index, completeTodo, removeTodo }) {
  console.log("hiiii");
  return (
    <div>
      <div className={todo.isCompleted ? "line-through" : ""}>
        <p>{todo.text}</p>
      </div>
      <button onCllick={() => completeTodo(index)}>completed</button>
      <button onCllick={() => removeTodo(index)}>X</button>
    </div>
  );
}

function TodoForm({ addTodo }) {
  const [value, setValue] = useState("");

  handleSubmit = (e) => {
    e.preventDefault();
    if (!value) return;
    addTodo(value);
    setValue("");
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="add new todo"
          value={value}
          onChange={(e) => {
            setValue(e.target.value);
          }}
        />
      </form>
    </div>
  );
}

function App() {
  const [todos, setTodos] = useState([
    {
      text: "eat lunch",
      isCompleted: false
    },
    {
      text: "do homework",
      isCompleted: false
    },
    {
      text: "go to school",
      isCompleted: false
    }
  ]);

  const addTodo = (text) => {
    const newTodos = [...todos, { text }];
    setTodos(newTodos);
  };

  const completeTodo = (index) => {
    console.log("completed");
    const newTodos = [...todos];
    newTodos[index].isCompleted = true;
    setTodos(newTodos);
  };

  const removeTodo = (index) => {
    console.log("deleted");
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  return (
    <div>
      <div>
        {todos.map((todo, index) => {
          return (
            <Todo
              key={index}
              index={index}
              todo={todo}
              completeTodo={completeTodo}
              removeTodo={removeTodo}
            />
          );
        })}
      </div>
      <div>
        <TodoForm addTodo={addTodo} />
      </div>
    </div>
  );
}
export default App;

Sanbox 链接：https://codesandbox.io/s/serverless-bash-ef4hk?file=/src/App.js:0-1979

Answer 1

你正在改变状态。

const completeTodo = (index) => {
  console.log("completed");
  const newTodos = [...todos];
  newTodos[index].isCompleted = true; // <-- mutates todo object
  setTodos(newTodos);
};

const removeTodo = (index) => {
  console.log("deleted");
  const newTodos = [...todos];
  newTodos.splice(index, 1); // <-- mutates todo object
  setTodos(newTodos);
};

除了对数组进行浅拷贝外，您还需要对正在更新的任何嵌套状态进行浅拷贝。 todo 对象也应该是新的对象引用。

const completeTodo = (index) => {
  console.log("completed");
  setTodos((todos) =>
    // array.map to return new array
    todos.map((todo, i) =>
      i === index
        ? {
            ...todo, // shallow copy old todo object
            isCompleted: true
          }
        : todo
    )
  );
};

const removeTodo = (index) => {
  console.log("deleted");
  // array.filter to return new array
  setTodos((todos) => todos.filter((_, i) => i !== index));
};

修复Todo 中的按钮，它们没有使用正确的事件处理程序。

<button onCllick={() => completeTodo(index)}>completed</button>
<button onCllick={() => removeTodo(index)}>X</button>

应该是

<button onClick={() => completeTodo(index)}>completed</button>
<button onClick={() => removeTodo(index)}>X</button>