Array.push 不是函数，在从 localstorage 检索的数组上答案

【问题标题】：Array.push is not a function, on array retrieved from localstorageArray.push 不是函数，在从 localstorage 检索的数组上
【发布时间】：2020-09-08 00:07:58
【问题描述】：

我初始化对象和数组的方式有问题吗？我正在尝试将购物车数据保存到 localStorage。我从状态中获取数据，并在我控制台时显示。登录了，对象似乎可以工作，但数组不行，我不明白代码有什么问题。

未处理的拒绝（TypeError）：cartItemObjectArray.push 不是函数

编辑：但是似乎 if 语句认为本地存储不是未定义的，即使它是，我也不知道如何解决。

下面是我的构造函数

constructor(props) {
    super(props);
    this.state = {
      comicId: null,
      selectedOption: null,
      comicPrice: null,
      purchaseType: null,
      priceCurrency: "$",
      currencyVisibility: null,
      issueObjectState: null,
      seriesObjectState: null,
      pricingObjectState: null,
    };
  }

下面是我的 onSubmit()，这样每当用户点击添加到购物车时，就会检索并设置状态值

onSubmit = async (event) => {
    //submit function when adding item to cart

    if (localStorage.getItem("cartitem") != undefined) {
      //if there are items in the array then do this
      console.log("It came not undefined");
      let cartItemObjectArray = localStorage.getItem("cartitem");
      let cartItemObject = {
        comicid: this.state.comicId,
        purchasetype: this.state.purchaseType,
      };
      console.log(cartItemObject);
      cartItemObjectArray.push(cartItemObject);
      localStorage.setItem("cartitem", cartItemObjectArray);
      toast.success("Item Added to cart");
      console.log("This is the mighty array ", cartItemObjectArray);
    } else {
      //if there are no items in the cart array in the local storage then initialize and do this
      console.log("It came undefined");
      let cartItemObjectArray = [];
      let cartItemObject = {
        comicid: this.state.comicId,
        purchasetype: this.state.purchaseType,
      };
      console.log(cartItemObject);
      cartItemObjectArray.push(cartItemObject);
      localStorage.setItem("cartitem", cartItemObjectArray);
      toast.success("Item Added to cart");
      console.log("This is the mighty array ", cartItemObjectArray);
    }

else if (cartItemFromLocalStorage == null) {
      //if there are no items in the cart array in the local storage then initialize and do this
      console.log("It came undefined");
      let cartItemObjectArray = [];
      let cartItemObject = {
        comicid: this.state.comicId,
        purchasetype: this.state.purchaseType,
      };
      console.log(cartItemObject);
      cartItemObjectArray.push(cartItemObject);
      localStorage.setItem("cartitem", JSON.stringify(cartItemObjectArray));
      toast.success("Item Added to cart");
      console.log("This is the mighty array ", cartItemObjectArray);
    }
  };

【问题讨论】：

cartItem in localStorage 是一个字符串。所以你需要先deserialize它和JSON.parse，然后再将项目添加到数组中

标签： javascript reactjs

【解决方案1】：

本地存储仅支持字符串。尝试对数组进行字符串化保存，然后在从本地存储中获取时对其进行解析。

// Save the array in local storage
localStorage.setItem("cartitem",JSON.stringify(cartItemObjectArray));


// Retrieve the array from local storage
var cartItemObjectArray = JSON.parse(localStorage.getItem("cartitem"));

【讨论】：

不，它不起作用，我在 if else 的另一个位置创建了数组。
当我通过数组打印 JSON.parse() 时，console.log 显示为“[object Object]”
你能提供你得到的错误吗？或者将更新后的代码添加到问题中，我们可以看到您如何实现提供的解决方案
正确使用 JSON.stringify 和 JSON.parse 的代码更新帖子，以便我们再次看到您的代码

【解决方案2】：

因为 localStorage 只是存储具有构造键值的数据，因此您需要在存储之前将数组转换为 Javascript String 对象。您已更改代码中的所有 setItem：

localStorage.setItem("data",JSON.stringify(cartItemObjectArray));

记得在 UI 上显示数据之前检索 Javascript 字符串对象：

JSON.parse(localStorage.getItem("data"))

【讨论】：

JSON.stringify(localStorage.getItem("data")) 应该是 JSON.parse(localStorage.getItem("data"))