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

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

所以我在useEffect函数中有一个本地存储设置器和获取器，如下所示：

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

解决方法

您的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