时间戳

首页 > 解决方案 > ReactJS -> 为什么我的本地存储以这种方式存储项目？

javascript - ReactJS -> 为什么我的本地存储以这种方式存储项目？

问题描述

所以我在 useEffect 函数中有一个 localstorage setter 和 getter，如下所示：

useEffect(() => {


        localStorage.setItem('products', JSON.stringify(product))

})

useEffect(()=>{
    setProduct([...product,JSON.parse(localStorage.getItem('products'))])


},[])

然后我使用我在这里声明的 setProduct 将它们保存到一个数组中：

    const [product, setProduct]= useState([])

并且每当我控制台记录产品数组时，它都会在控制台中以以下格式返回数组：

Array(1)
  0: Array(5)
   0: Array(4)
     0:
       Image: "/static/media/Dress.1c414114.png"
       Price: 540
       id: 0
       name: "Blue Dress"
       __proto__: Object
     1:
       Price: 600
       id: 1
       image: "/static/media/Dress.1c414114.png"
       name: "Red Dress"
       __proto__: Object

我的问题是为什么它会以这种格式显示，我怎样才能让它看起来像这样：

Array(1)
     0:
       Image: "/static/media/Dress.1c414114.png"
       Price: 540
       id: 0
       name: "Blue Dress"
       __proto__: Object
     1:
       Price: 600
       id: 1
       image: "/static/media/Dress.1c414114.png"
       name: "Red Dress"
       __proto__: Object

标签： javascriptarraysreactjslistobject

解决方案

您JSON.parse返回一个数组。

setProduct([...product,JSON.parse(localStorage.getItem('products'))])

将创建一个包含 的数组product，以及另一个数组，即本地存储项。

而是散布本地存储项目。

setProduct([...product, ...JSON.parse(localStorage.getItem('products'))])

或者只是把它留在记忆中

const [product, setProduct]= useState(JSON.getItem('products') || []);
useEffect(() => {
  localStorage.setItem('products', JSON.stringify(product));
}, [product])

并product正常setProduct使用

推荐阅读