将对象数组保存到javascript localStorage不工作

我试图在本地存储器中存储一个对象数组。我正在使用：

我得到了一个错误：

SyntaxError: Unexpected token o in JSON at position 1

我知道这个错误意味着我要解析JSON两次，但是如果我不解析它，当我从localStorage获得“产品”时，它是：

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

我做错了什么

完整代码：

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import ProductList from "../products/ProductList";
import productData from "../products/model";

class App extends Component {
  constructor(props) {
    super(props);
    let initialProducts = JSON.parse(localStorage.getItem("products") || "[]")
    console.log(initialProducts);
    this.state = {
      newProductName: "",
      newProductPrice: 0,
      products: initialProducts
    };
  }

  updateNewProductName = event => {
    this.setState({ newProductName: event.target.value });
  };

  updateNewProductPrice = event => {
    this.setState({ newProductPrice: event.target.value });
  };

  addProduct = () => {
    this.state.products.push({
      name: this.state.newProductName,
      price: this.state.newProductPrice
    });
    this.setState({
      products: this.state.products
    });
    localStorage.setItem( 'products', JSON.stringify(this.state.products) );
  };

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <div className="App-header-container">
            <img
              src="https://www.ezyvet.com/wp-content/uploads/2016/04/ezyVet-Logo-22-4.png"
              alt="ezyVet Cloud Veterinary Practice Management Software"
              id="logo"
              className="App-logo"
              data-height-percentage="65"
              data-actual-width="768"
              data-actual-height="252"
            />
          </div>
        </header>
        <div className="App-header-container">
          <ProductList products={this.state.products} />
          <input
            type="text"
            id="uname"
            name="uname"
            required
            minLength="2"
            placeholder="name"
            value={this.state.newProductName}
            onChange={this.updateNewProductName}
          />
          <input
            type="number"
            id="uprice"
            name="uprice"
            required
            placeholder="price"
            value={this.state.newProductPrice}
            onChange={this.updateNewProductPrice}
          />
          <button onClick={this.addProduct}>Add Product</button>
        </div>
      </div>
    );
  }
}

export default App;

import React，{Component}来自“React”；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“./产品/产品列表”导入产品列表；
从“./products/model”导入产品数据；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
让initialProducts=JSON.parse（localStorage.getItem（“产品”）| |“[]））
console.log（初始化产品）；
此.state={
newProductName:，
新产品价格：0，
产品：首字母缩写产品
};
}
updateNewProductName=事件=>{
this.setState（{newProductName:event.target.value}）；
};
updateNewProductPrice=事件=>{
this.setState（{newProductPrice:event.target.value}）；
};
addProduct=（）=>{
这个。州。产品。推({
名称：this.state.newProductName，
价格：this.state.newProductPrice
});
这是我的国家({
产品：this.state.products
});
setItem（'products'，JSON.stringify（this.state.products））；
};
render（）{
返回(
添加产品
);
}
}
导出默认应用程序；

当我双击

JSON.parse

和

JSON.stringify

时，它就会工作

例如：

let initialProducts = JSON.parse(JSON.parse(localStorage.getItem("products")));
localStorage.setItem( 'products', JSON.stringify(JSON.stringify(this.state.products) ));

---

可能与嵌套在数组中的对象有关。

是否验证了localstorage中的原始字符串？它包含你认为它包含的内容吗？@NisargShah我刚刚做了，值是[object object]，[object object]，[object object]，[object object]，[object object object]，[object object object]，[object object object]。奇怪的是，在我问题顶部的示例解决方案中，它以相同的方式设置localStorage。如果

this.state.products

被错误地传递给

localStorage

作为

localStorage.setItem（'products'，this.state.products）

而不是

localStorage.setItem（'products'，JSON.stringify（this.state.products）

那么它将始终存储为

[object object]

。在本地存储中设置之前，请检查

JSON.stringify（this.state.products）

中的值是多少？@viksool

console.log（JSON.stringify（this.state.products））；

给出

[{“名称”：“大锤”，“价格”：125.75}{“名称”：“斧头”，“价格”：190.5}，{“名称”：“带锯”，“价格”：562.13}，{“名称”：“凿子”，“价格”：12.9}，{“名称”：“钢锯”，“价格”：18.45}，{“名称”：“eeee”，“价格”：“02}]

@benaminobaggins在调用

localStorage.setItem

之前尝试记录

this.state.products

。我怀疑它在那个阶段已经是一个字符串，所以

JSON.stringify

不会影响它。

let initialProducts = JSON.parse(JSON.parse(localStorage.getItem("products")));
localStorage.setItem( 'products', JSON.stringify(JSON.stringify(this.state.products) ));