使用状态设置器不立即更新数组

Question

我正在尝试开发一个待办事项应用程序。 下面是代码。
当我在文本框中输入待办事项并单击以添加时，待办事项正在提供旧值。
例如，如果我输入"a"，那么待办事项数组会给出[]，那么当我输入"b"时，待办事项会显示["a"]。 请帮忙。

import React, { useState, useEffect } from "react";
function Todo() {
const [value, setValue] = useState("");
const [todos, setTodos] = useState([]);
function changeHandler(e) {
// console.log(e.target.value)
setValue(e.target.value);
}
// this doesn't update todos and moreover logs infinitely
// useEffect(() => {
//   setTodos([...todos]);
// }, [todos]);
function handleClick() {
setTodos([...todos, value]);
console.log(todos);
setValue("");
}
return (
<div>
<input
type="text"
value={value}
onChange={changeHandler}
placeholder="Add Todo"
/>
<button onClick={handleClick}>Add Todo</button>
</div>
);
}
export default Todo;

编辑：

下面工作

useEffect(() => {
console.log(todos);
}, [todoList]);
function handleClick() {
setTodos([...todos, value]);
setValue("");
}
// console.log(todos);
return (
...
}
export default Todo;

Answer 1

在 React 中设置状态是一个异步操作，如果你想记录你的状态，你应该使用useEffect.

// Don't setTodos in an useEffect for todos since it will result in an infinite loop.
useEffect(() => {
console.log(todos)
}, [todos]);

Answer 2

设置状态是异步的。 使用 setTodos 或 setValues 时，会导致流中重新呈现。

将控制台移至待办事项范围功能。喜欢这个：

...
function handleClick() {
setTodos([...todos, value]);
setValue("");
}
console.log(todos);
return (
...

下面的代码会导致循环，因为您的useEffect正在侦听todos中的所有更改，并且您setTodos更多时间。

// useEffect(() => {
//   setTodos([...todos]);
// }, [todos]);