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

Question

这是 function 从数据库中获取电子商务网站产品页面的产品。

我正在尝试编写类似的 function 用于登录。

你能帮我解决一下我是新来的反应吗？

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

在每次迭代中， storedProduct的当前项被克隆到一个新的 object ( singeItem ) 中。 在下一行中，这个singleItem被附加到一个重新分配给tempProducts的新数组中。 tempProducts是使用扩展运算符创建的全新数组 object。

Answer 2

您粘贴的代码是将匿名箭头 function 分配给变量storedProducts 。

它似乎是从组件的 class 定义中删除的。 组件是 React javascript 库的构建块，它允许通过构建这些组件的树来构建 UI，类似于 HTML。

处理与 React 相关的任何事情的唯一部分是这个：

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

它设置组件的 state，这通常会导致组件重新渲染 – https://reactjs.org/docs/state-and-lifecycle.html

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

这整个块很奇怪，因为似乎不需要。 它需要一个数组res.data （我知道它是一个数组，因为forEach用于在下一行中迭代它，这是一个 Array 方法）并迭代它的项目，使用spread语法const singleItem = {...item }; （字面意思是，将新的 object 分配给 singleItem 并将item的所有属性复制到其中）。 由于res.data已经是一个数组，因此可以直接使用它来设置组件的 state，如下所示：

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