Question

我在todos状态挂钩中有一组对象。我想更改单个属性（如果完成）。似乎我可以更新它，但无需使用setTodos。我是React的初学者。

  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState("");

  const addTodoHandler = (e) => {
    e.preventDefault();
    if (input.length < 2) return;
    setTodos([...todos, { id: Date.now(), text: input, isComplete: false }]);
    setInput("");
  };

  const removeHandler = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

 const completeHandler = (id) => {

    // working without setTodo()
    // errors when added setTodo()
     todos.map((todo) =>
       todo.id === id ? console.log((todo.isComplete = !todo.isComplete)) : ""
     );

  };

      <div className="todolist">
        {todos.map((todo) => (
          <Todo
            key={todo.id}
            id={todo.id}
            text={todo.text}
            removeHandler={removeHandler}
            completeHandler={completeHandler}
            isComplete={todo.isComplete}
          />
        ))}
      </div>

Answer 1

要在completeHandler()内部修复此问题，请首先使用map()方法创建一个新数组，然后在map()方法内部更新当前isComplete的{{1}}并简单地返回更新后的值，例如：

todo

然后在var updatedTodos = todos.map((todo) => todo.id === id ? { ...todo, isComplete: !todo.isComplete } : todo);内返回这个新的setTodos()数组，如：

updatedTodos

您也可以像这样单行：

setTodos(updatedTodos);

但是，如果要逐行检查每个变量，则以前的代码提供了更高的可读性，并且还有助于更好地调试。

使用useState（）挂钩从数组更新对象的单个属性

1 个答案: