如何在 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>
                    )
                  })
                }