如何在 DApp 前端中用 HTML 列出来自智能合约的一些数据答案

【问题标题】：How to list with HTML some data coming from Smart Contract in a DApp-Frontend如何在 DApp 前端中用 HTML 列出来自智能合约的一些数据
【发布时间】：2020-11-23 11:23:50
【问题描述】：

我有一个带有智能合约的 DApp，它持有一些报价（id、价格、所有者等）。我想在我的 DApp-Frontend 中显示该优惠。

首先，我调用智能合约并使用 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

【问题讨论】：

只表示props对象上没有offers。不应该是this.state.offers吗？

标签： javascript html reactjs ethereum web3

【解决方案1】：

TypeError: 无法读取未定义的属性“地图”

此错误是因为 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>
                    )
                  })
                }

【讨论】：