使用智能合約中的項目更新 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 規則的更多信息。