useState setter未立即更新数组

Question

我正在尝试在react中开发todo应用程序。下面是代码。
当我在文本框中输入todo并单击添加时，todo将给出旧值。
例如，如果我输入“a”，则todo数组将给出[]，然后当我输入“b”时，todo显示[“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

设置状态是异步的。当使用setTodos或setValue时，它会导致流中的重新渲染。

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

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

console.log(todos);

return (
...

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

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

Answer 2

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

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