Question

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

我正在尝试编写一个类似的登录函数。

你能帮我解决这个问题吗？

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 的当前项被克隆到一个新对象 (singeItem) 中。中的下一行此singleItem被附加到一个新的数组，它是reassigend为tempProducts。 tempProducts 是一个使用扩展运算符创建的全新数组对象。

Answer 2

您粘贴的代码是将匿名箭头函数赋值给变量 storedProducts。

似乎是从一个组件的类定义中剪下来的。组件是 React javascript 库的构建块，允许通过构建这些组件的树来构建 UI，类似于 HTML。

唯一处理与 React 相关的部分就是这个：

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

它设置组件的状态，通常会导致组件重新渲染 - 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 方法）并迭代它的项目，使用 {{ 创建副本1}} 语法 spread（字面意思是将新对象分配给 singleItem 并将 const singleItem = { ...item }; 的所有属性复制到其中）。由于 item 已经是一个数组，因此可以直接使用它来设置组件的状态，如下所示：

res.data

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

2 个答案: