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)

OR

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

数组未通过useState更新

1 个答案: