[英]How to list with HTML some data coming from Smart Contract in a DApp-Frontend
I have DApp with a Smart Contract which is holding some offers (id, price, owner etc.).我有一个带有智能合约的 DApp,它持有一些报价(id、价格、所有者等)。 I want to show that offers in my DApp-Frontend.
我想在我的 DApp 前端显示该优惠。
First I am calling the Smart Contract and fetching all offers into an array with JavaScript:首先,我调用智能合约并使用 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]
})
}
Then I want to show the content of that array in a table:然后我想在表格中显示该数组的内容:
<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>
I am getting the error TypeError: Cannot read property 'map' of undefined我收到错误TypeError: Cannot read property 'map' of undefined
I don't know how to show the data properly on the table.我不知道如何在表格上正确显示数据。
Library: React图书馆:反应
OS: XUbuntu操作系统:XUbuntu
Browser: Chrome浏览器:Chrome
TypeError: Cannot read property 'map' of undefined类型错误:无法读取未定义的属性“地图”
This error is because this.props.offers is undefined.这个错误是因为 this.props.offers 是未定义的。
You have to use this.state.offers, I think.我认为您必须使用 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>
)
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.