ReactJS->将项目追加到数组，但显示未定义

如何解决ReactJS->将项目追加到数组，但显示未定义

我在两个不同的JS文件中有2个数组，它们声明如下： Index.JS：

const [product,setProduct] = useState([]);
const [item] = useState([
  {
    name: 'Blue Dress',Image: '/static/media/Dress.1c414114.png',Price: 540,id: 0,},{
    name: 'Red Dress',image: '/static/media/Dress.1c414114.png',Price: 600,id: 1,]);

第二个JS文件：

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

这是将数据附加到它们的一段代码： Index.JS：

const addItem = (item) => {
  setProduct([...product,item]);
  localStorage.setItem('products',JSON.stringify(product));
};

第二个JS文件：

const getProducts = () => {
  let X = JSON.parse(localStorage.getItem('products'));
  setProduct([...product,X]);
  console.log(product);
};

问题是，每当我在浏览器中转到第二个JS文件时，它都会接收本地存储项，并且假设应该将其添加到产品列表中，但是经过深入研究，我得出了结论并没有真正添加任何东西。为什么呢？

解决方法

您正在使用此行创建新引用：

   setProduct([...product,X])

之后，除非您将其用于公共上下文，否则这两个上下文产品将引用不同的对象；您将需要在公共上下文中定义const[product,setProduct] = useState() 并将其传递给两个组件，以使它们始终引用同一对象。例如：

//common context
const [product,setProduct] = useState()

const c1 = <Component1 useState={[product,setProduct]} />
const c2 = <Component2 useState={[product,setProduct]} />

...
//components

function Component1(props){
   const [product,setProduct] = props.useState;
...
}

function Component2(props){
   const [product,SetProduct] = props.useState;
...
}

,

由于设置的产品是空数组localStorage.setItem，因此在设置状态之后，您正在做[]。 您必须使用useEffect，并且可以在其中设置产品数组。