使用智能合约中的项目更新 React JS 中的 state 数组

Question

我有一个 state 数组在反应，我正在尝试从智能合约中添加项目

state 数组初始化为

常量 [产品，setProducts] = useState([]);

1. 和 2. 下面没有工作，但 3. 当数组设置在循环之外时工作

我在 1. 和 2 中做错了什么？

———————————————————————

1. 不工作

  for (var i = 1; i <= productCount; i++) {
        const product = await marketplace.methods.products(i).call()
        setProducts({
          products: [...this.state.products, product]
        })
      }

———————————————————————

2. 不工作

  for (var i = 1; i <= productCount; i++) {
        const product = await marketplace.methods.products(i).call()
         setProducts(prevState => ({
            products: [...prevState.products, product]
         }))
      }

———————————————————————

3. 工作过

  let productArray =[]
  for (var i = 1; i <= productCount; i++) {
        const product = await marketplace.methods.products(i).call()
        productArray.push[product]
      }
  setProduct(productArray)

———————————————————————

Answer 1

您使用的是功能组件，而不是 class 组件，因此您不应该使用this或this.state - 这就是 (1) 不起作用的原因。

(2) 不起作用，因为您的初始产品是一个普通数组- 它不是具有products属性的 object：

const [products, setProducts] = useState([]);

所以

     setProducts(prevState => ({
        products: [...prevState.products, product]
     }))

没有意义 - prevState是一个数组，而不是具有products属性的 object 。

稍加调整，（2）就可以工作：

     setProducts(prevState => ([...prevState, product]));

几乎可以肯定不需要使用.call ，您可以通过使用Promise.all来加快该过程，而不是等待每个 function 单独完成：

Promise.all(
  Array.from(
    { length: productCount },
    (_, i) => marketplace.methods.products(i + 1)()
  )
)
  .then((newProducts) => {
    setProducts([...products, ...newProducts]);
  })
  // .catch(handleErrors);

如果您的代码允许您一次发出所有请求，那是我更喜欢的版本。

Answer 2

1 和 2 违反了 React 中钩子的基本规则之一。

Only Call Hooks at the Top Level 。 即你应该避免在循环、嵌套函数或条件中调用钩子。

如前所述，考虑到您正在使用 React 钩子this事实，没有理由在第一种方法中使用它。

在docs上阅读有关 Hooks 规则的更多信息。