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

Question

所以我在 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

Answer 1

你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正常使用