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

Question

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

这是启动本地存储的代码块。

在这个块中，我从不同的组件接收一个项目作为对象并为其分配一个 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}]
我想做的是每次收到新项目时更新本地存储，如 article: [{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));

Answer 2

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 ));
        
      }

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

Cannot save more than 2 items in localStorage

javascript

local-storage

reactjs