Javascript 在localStorage中保存的项目不能超过2个

我正在尝试将本地存储中的项保存为对象数组。起初，它工作得很好，并根据需要将第一个元素存储在localstorage中，但我不能存储多个元素

下面是启动本地存储的代码块

在这个块中，我从不同的组件接收一个项目作为对象，并给它分配一个ID。 之后，我更新状态并存储该对象

 const saveEdit = (obj) =>{
        const text = obj.article;
        const id =  Date.now().toString(36) + Math.random().toString(36).substr(2);
        let article = { id: id, text:text}
        setSavedArticles([...savedArticles,article])
        localStorage.setItem('article', JSON.stringify(savedArticles));
        
      }

• 第一项作为项目：[{item}]
• 我想做的是在每次收到新项目时更新本地存储，如文章：[{item}，{item}…]

我正在用onClick函数从另一个组件发送信息

 <button
  onClick={() => saveEdit({
    article: textArea.current.value
  })}
   className="button mt-4">
      Save
 </button>

saveEdit({
文章：textArea.current.value
})}
className=“按钮mt-4”>
拯救

问题在于React中的设置状态是一个异步过程。这意味着您保存了savedArticles的上一个值，而不是更新后的值。您应该创建一个如下所示的新变量：

const newArticles = [...savedArticles,article] 

然后更新状态和本地存储：

setSavedArticles(newArticles)
localStorage.setItem('article', JSON.stringify(newArticles));

---

由于react更新状态为异步，因此不会立即更新savedArticles

 const saveEdit = (obj) =>{
        const text = obj.article;
        const id =  Date.now().toString(36) + Math.random().toString(36).substr(2);
        let article = { id: id, text:text}
        const newSavedArticles = [...savedArticles,article]
        setSavedArticles(newSavedArticles )
        localStorage.setItem('article', JSON.stringify(newSavedArticles ));
        
      }