你能解释一下这个反应 function 吗？

Question

This is the function that fetches the products from the database for the products page of a eCommerce website.

I am trying to write a similar function for sign-in.

Can you help me with that I am new to react?

storedProducts = () => {
  axios.get('http://127.0.0.1:5000/product')
    .then(res => {
      const storedProducts = res.data;
      let tempProducts = [];
      storedProducts.forEach(item => {
        const singleItem = { ...item
        };
        tempProducts = [...tempProducts, singleItem];

      });
      this.setState(() => {
        return {
          products: tempProducts
        };
      });
    })
}

Answer 1

In each iteration the current item of the storedProduct is cloned into a new object ( singeItem ). In the next line this singleItem is appended to a new array that is reassigend to tempProducts . tempProducts is a complete new array object created using the spread operator.

Answer 2

The code you pasted is an assignment of an anonymous arrow function to a variable storedProducts .

It seems to be cut from a class definition of a component. Components are the building blocks of React javascript library that allow building UI by building trees of these components, similar to HTML.

The only part that deals with anything related to React is this one:

this.setState(()=>{
  return {products:tempProducts};
});

It sets the state of the component, which normally causes the component to rerender – https://reactjs.org/docs/state-and-lifecycle.html

const storedProducts = res.data;
let tempProducts = [];
storedProducts.forEach(item => {
  const singleItem = { ...item };
 tempProducts = [...tempProducts, singleItem];
});

This whole block is quite strange, because seems unneeded. It takes an array res.data (I know it's an array because forEach is used to iterate it in the following line, and that is an Array method) and iterates over items of it, creating copies using spread syntax const singleItem = {...item }; (literally, assign new object to singleItem and copy all properties of item into it). Since res.data is already an array, it could be used directly to set state of the component like this:

this.setState(()=>{
  return { products: res.data };
});