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

Posted 2023-02-18

【中文标题】如何在 DApp 前端中用 HTML 列出来自智能合约的一些数据

【英文标题】：How to list with HTML some data coming from Smart Contract in a DApp-Frontend

【发布时间】：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吗？

【参考方案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>
                    )
                  )