如何在 DApp 前端中使用 HTML 列出一些來自智能合約的數據

Question

我有一個帶有智能合約的 DApp，它持有一些報價（id、價格、所有者等）。 我想在我的 DApp 前端顯示該優惠。

首先，我調用智能合約並使用 JavaScript 將所有報價提取到一個數組中：

// Load offers
      for (var i = 1; i <= offerCount; i++) {
        const offer = await contract.methods.offers(i).call()
        this.setState({
          offers: [...this.state.offers, offer]
        })
      }

然后我想在表格中顯示該數組的內容：

                <table className="table">
                  <thead>
                    <tr>
                      <th scope="col">#</th>
                      <th scope="col">Price</th>
                      <th scope="col">Owner</th>
                      <th scope="col"></th>
                    </tr>
                  </thead>
                  <tbody>
                    {
                      this.props.offers.map((offer, key) => {
                        return (
                          <tr key={key}>
                            <th scope="row">{offer.id.toString()}</th>
                            <td>{this.state.offers}</td>
                          </tr>
                        )
                      })
                    }
                  </tbody>
                </table>

我收到錯誤TypeError: Cannot read property 'map' of undefined

我不知道如何在表格上正確顯示數據。

圖書館：反應

操作系統：XUbuntu

瀏覽器：Chrome

Answer 1

類型錯誤：無法讀取未定義的屬性“地圖”

這個錯誤是因為 this.props.offers 是未定義的。

我認為您必須使用 this.state.offers。

                {
                  this.state.offers.map((offer, key) => {
                    return (
                      <tr key={key}>
                        <th scope="row">{offer.id.toString()}</th>
                        <td>{this.state.offers}</td>
                      </tr>
                    )
                  })
                }