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