使用ReactHooks和React.state将对象数组存储在本地存储中

Question

在将对象添加到本地存储时，我遇到了一个问题，我仔细研究了一下，发现我们必须使用stringify来存储对象(本地存储(，否则它将被存储为字符串。

它对一个对象很好，但当一个新对象出现时，它会用新对象替换它，而不是作为另一个对象添加(在本地存储中(，所以基本上我希望实现如下所示并保存在localStorage、中

• 当我们接收到第一个对象时，basketItems/LocalStorage将是[{obj1}]
• 当我们接收到第二个对象时，则basketItems/LocalStorage将是[{obj1},{obj2}]
• 等等

我已经厌倦了包括扩散算子在内的几种方法，但我真的想不出一种方法来做这件事，有什么建议吗。感谢

注意：addBasketitems是一个将对象信息从子(Home(传递给父(App(的函数

let initialvalue = () => {
return window.localStorage.getItem("user-basket");
};
function App() {
const [basketItems, setBasketItems] = useState(initialvalue);
const addBasketitems = (product, quantity) => {
setBasketItems((prevItems) => {
const newItems = [...prevItems, { ...product, quantity }];
window.localStorage.setItem("user-basket", JSON.stringify(newItems));
return newItems;
}); 
// it works fine but return single object only when new object received then it just replace with existing one rather then add another object in an array
};
return (
<Router>
<div className="App">
<header className="header">
<Nav userinfo={userData} userstatus={siginalready} />
</header>
<div className="main">
<Switch>
<Route
path="/"
exact
render={(props) => <Home {...props} addBasketitems={addBasketitems} />}
/>
<Route
path="/basket"
exact
render={(props) => (
<Basket
{...props}
userData={userData}
userstatus={siginalready}
basketItems={basketItems}
/>
)}
/>
</Switch>
</div>
<div className="footer">
<Footer />
</div>
</div>
</Router>

)；}

Answer 1

发生这种情况是因为您总是将对象保存到本地存储。

此行：

JSON.stringify({ ...product, quantity })

需要如下，并将其移动到setBasketItems:的回调中

setBasketItems((prevItems) => {
const newItems = [...prevItems, { ...product, quantity }];
window.localStorage.setItem("user-basket", JSON.stringify(newItems));
return newItems;
});