我在待办事项状态 Hook 中有一组对象。如果完成,我想更改单个属性。似乎我可以更新它但不使用 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>
最佳答案
在 completeHandler()
中解决这个问题首先使用 map()
创建一个新数组方法和内部map()
方法更新 isComplete
当前 todo
并简单地返回更新后的值,如:
var updatedTodos = todos.map((todo) => todo.id === id ? {
...todo,
isComplete: !todo.isComplete
} : todo);
然后里面setTodos()
只需返回这个新的 updatedTodos
数组如:
setTodos(updatedTodos);
您也可以在一行中执行此操作,例如:
setTodos(todos.map((todo) => todo.id === id ? { ...todo, isComplete: !todo.isComplete } : todo));
但前面的代码提供了更多的可读性,如果您想逐行检查每个变量,还有助于更好地调试。
关于javascript - 使用 useState() Hook 从数组更新对象的单个属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61692695/