Question

我正在尝试开发一个todo应用。下面是代码。
当我在文本框中输入todo并单击添加时，则todo赋予了旧的价值。
例如。如果我输入“ 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时，它会导致流程中的重新渲染。

将控制台移至Todo作用域功能。像这样：

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

console.log(todos);

return (
...

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

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

useState setter不立即更新数组

2 个答案: