[英]Update a single property of object from array using useState() hook
我在 todos state 挂钩中有一组对象。 如果完成,我想更改单个属性。 似乎我可以更新它但不使用 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()
方法内部更新当前todo
的isComplete
并简单地返回更新后的值,例如:
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));
但是如果您想逐行检查每个变量,前面的代码提供了更多的可读性并且还有助于更好地调试。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.