Javascript 为什么两次点击提交按钮时Todo项只保存到本地存储？

我用react制作简单的Todo应用程序，可以在localStorage上保存项目，但我必须按两次提交按钮才能保存到localStorage。那么如果我们提交输入“Hello”，然后提交“World”，并将保存到localStorage的是文本“Hello”，如何使只点击1次按钮

,，

import React，{useState，useffect}来自“React”；
导入“/Todo.css”；
常数Todo=（）=>{
const[text，setText]=useState（“”）；
const[check，setCheck]=useState（false）；
const[todo，setTodo]=useState（[]）；
useffect（（）=>{
getTodo（）；
}, []);
const updateText=e=>{
setText（即目标值）；
console.log（文本）；
};
常量getTodo=（）=>{
让todoLocal=JSON.parse（localStorage.getItem（“todo”））| |[]；
setTodo（todoLocal）；
};
const saveTodo=（todo={}）=>{
setItem（“todo”，JSON.stringify（todo））；
};
常数fillTodo=e=>{
e、 预防默认值（）；
setTodo（prevTodo=>[
…普雷维托多，
{
文本：文本
}
]); 
//localStorage.removietem（'todo'）；
控制台日志（todo）；
保存todo（todo）；
};
返回(
待办事项清单
{todo.map（（todoItem，index）=>(
{todoItem.text}

))}
+待办事项
);
};
导出默认Todo；

如果您认为在本地存储中存储是一种副作用，不是更好吗

// syncs localStorage with the current todo value
React.useEffect(() => {
  localStorage.setItem("todo", JSON.stringify(todo));
}, [todo])

---

我本打算提出同样的建议，但后来我看到了你的答案。由于OP有一个

saveTodo

方法，这里可能可以使用它，但实际上不需要有单独的方法。我这样做，但使localStorage始终仅为空数组，我想在

上的
fillTodo
中解决这个问题，我必须点击按钮使其保存到
todo
数组状态。
// syncs localStorage with the current todo value
React.useEffect(() => {
  localStorage.setItem("todo", JSON.stringify(todo));
}, [todo])