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

Question

我正在尝试将本地存储中的项目保存为对象数组。起初它工作得很好，并根据需要将第一个元素存储在 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>

Answer 1

问题是在 React 中设置状态是一个异步过程。这意味着，您保存了savedArticles 的先前值，而不是更新后的值。你应该像这样创建一个新变量：

const newArticles = [...savedArticles,article] 

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

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