控制台登录后，数组更新落后1个元素-Reactjs

问题描述

我有一个名为“ todoList”的状态，在这里我存储了用户输入的任务。 ui很好地显示了任务。 但是每当我管理日志“ todoList”时，它都落后了一步。 例如，如果我输入：

• task1
• task2
• task3

控制台显示：

• []
• [task1]
• [任务1，任务2]

我在做什么错了？

遇到问题时，我打算将任务存储在本地存储中。

TIA寻求帮助！

import React,{ useState } from "react";

const App = () => {
  const [todoList,setTodoList] = useState([]);
  const [task,setTask] = useState("");

  const handleForm = (e) => {
    e.preventDefault();
  };

  const handleSubmit = () => {
    setTodoList((todoList) => [...todoList,task]);
    setTask("");

    // localStorage.setItem('tasks',JSON.stringify(todoList));
    console.log(todoList);
  };

  return (
    <div>
      <h1>Todo List</h1>
      <form onSubmit={handleForm}>
        <label>
          Add Todo
          <input
            type="text"
            value={task}
            onChange={(e) => setTask(e.target.value)}
          />
        </label>
        <input type="submit" value="Add Task" onClick={handleSubmit} />
      </form>
      <ul className="todo-list">
        {todoList.map((todo,index) => {
          return (
            <li key={index}>
              {todo}
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export default App;

Link to sandbox

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）