Reactjs useState setter未立即更新数组

我正在尝试在react中开发todo应用程序。下面是代码。
当我在文本框中输入todo并单击添加时，todo将给出旧值。
例如，如果我输入“a”，则todos数组给出

[]

，然后当我输入“b”时，todos显示

[“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;

---

在React中设置状态是一个异步操作，如果要记录状态的状态，应使用

useffect

//不要将todos设置为useffect for todos，因为它将导致无限循环。
useffect（（）=>{
控制台日志（todos）
}[待办事项]；

在React中设置状态是一个异步操作，如果要记录状态的状态，应使用

useffect

//不要将todos设置为useffect for todos，因为它将导致无限循环。
useffect（（）=>{
控制台日志（todos）
}[待办事项]；

设置状态为异步。 使用setTodos或setValues时，会导致流中重新渲染

将控制台移动到Todo作用域函数。像这样：

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

console.log(todos);

return (
...

下面的代码会导致一个循环，因为您的useEffect正在侦听

todos

中的所有更改，并且您的

setTodos

时间更长

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

---

设置状态为异步。 使用setTodos或setValues时，会导致流中重新渲染

将控制台移动到Todo作用域函数。像这样：

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

console.log(todos);

return (
...

下面的代码会导致一个循环，因为您的useEffect正在侦听

todos

中的所有更改，并且您的

setTodos

时间更长

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

---

setTodos

是异步的，您不能将值记录在它的正下方。

setTodos

是异步的，您不能将值记录在它的正下方。因此，如果您需要立即进行更改，您该怎么办？例如，当我单击“提交”按钮时，我需要立即显示微调器，而不是等待

设置加载

，然后在渲染时选中

加载

。那么，如果需要立即进行更改，该怎么办？例如，当我单击Submit按钮时，我需要立即显示微调器，而不是等待

setLoading

，然后在渲染时选中

loading

。