在反应中使用 useState 钩子时如何读取更新数组的值？

Question

我正在尝试在 React 中构建我的第一个待办事项列表应用程序，但我似乎无法成功地从我使用 useState([]) 启动的“列表”数组中读取数据。我面临的问题是 - 如果我第一个输入的任务是“1-Eat Breakfast”并且我点击添加按钮，我在 console.log 中得到一个空数组，当我进入我的第二个任务时，可以说 - “2-Hit the gym”；那是我之前的任务是记录控制台的时间。所以，显然我无法读取数组的最新状态——“列表”。你能指出我在下面给出的代码中做错了什么吗？非常感谢。

import { useState } from "react";

const ToDo = () => {
  const [task, setTask] = useState("");
  const [list, setList] = useState([]);

  const readData = (event) => {
    event.preventDefault();
    setTask(event.target.value);
  };

  const showList = (event) => {
    event.preventDefault();
    setList([...list, task]);
    console.log(list);
  };

  return (
    <div>
      <div>
        <form onSubmit={showList}>
          <input type="text" value={task} onChange={readData} />
          <button>Add to List</button>
        </form>
      </div>
    </div>
  );
};

export default ToDo;

Answer 1

你能改变吗

 const showList = (event) => {
    event.preventDefault();
    setList([...list, task]);
    console.log(list);
  };

至

 const showList = (event) => {
    event.preventDefault();
    list.push(task);
    setList(list);
    console.log(list);
  };

在反应中使用 useState 钩子时如何读取更新数组的值？

How to read the value of updated array while using useState hook in react?

reactjs

react-hooks

use-state