useState 未更新数组

Question

function App() {

  let [task, setTask] = useState('');
  let [taskList, updateTaskList]= useState([]);

  let updateList = function (event) {
    event.preventDefault();
    console.log(task);
    updateTaskList([
      ...taskList,
      {text: task, id: Math.random()*1000}
    ]);
    console.log(taskList);  
  }


  return (
    <div className="App" >
      <div>
        <h3 className="heading">Task list</h3>
        <form onSubmit={updateList}>
          <input type="text" className="input-section"
            placeholder="Enter your tasks" value={task}
            onChange={(event) => { setTask(event.target.value) }} />
          <span className="fa fa-plus-square" aria-hidden="true"></span>
        </form>
         {/* {taskList.map((eachValue) => (
            <AddList listItem={eachValue} />
          ))};  */}
      </div>
    </div>
  );
}

这是我的一段代码，我想在这里创建一个待办事项列表。但是 updateTaskList 无法正常工作。在输入框中输入一些值并按回车键后，taskList 显示为空数组。我不明白我做错了什么，有人可以告诉我我做错了什么吗

Answer 1

updateTaskList 是异步的。它可能正在更新您的列表，但您看不到它，因为您在 updateTaskList 之后立即打印列表。尝试添加延迟然后打印任务列表或使用 useEffect 打印它。

    setTimeout(() => console.log(taskList), 500)

或

    useEffect(() => {
      console.log(taskList)
    }, [taskList.length])

useState 未更新数组

Array is not getting updated by useState

javascript

reactjs

use-state