问题描述
我正在开发一个市场 DApp
,卖家可以在其中列出待售产品,而买家可以使用以太币购买。我使用 Metamask
作为钱包,使用 ganche
作为我本地运行的区块链。
当卖家添加待售产品时,它会显示在购买组件中供买家购买,但随着再添加一件待售产品,购买组件只会显示最新添加的待售产品,而不是所有产品。
我正在使用 map
函数来映射产品数组,以下是返回买方组件的代码:
<tbody id="productList">
{ productList.map((product,key) => {
return(
<tr key={key}>
<th scope="row">{ product.id.toString()}</th>
<td>{product.name}</td>
<td>{window.web3.utils.fromWei(product.price.toString(),'Ether')} ETH</td>
<td>{product.owner}</td>
<td>
{ !product.purchased
? <button className="btn btn-primary"
name={product.id}
value={product.price}
onClick{purchaseProduct(e.target.name,e.target.value) }} >Buy
</button>
: <button className="btn btn-success">Owned</button>
}
</td>
</tr>
);
})}
</tbody>
productList
是包含从 App.js
和 loadBlockchainData
函数传递下来的产品列表的状态,我们连接到智能合约并定义 productList:
const [loading,setLoading] = useState(true);
const [account,setAccount] = useState("");
const [marketplace,setMarketplace] = useState("");
const [productList,setProducts] = useState([]);
const loadBlockchainData = async () => {
const web3 = window.web3;
const accounts = await web3.eth.getAccounts();
setAccount(accounts[0]);
const networkId = await web3.eth.net.getId();
const networkData = Marketplace.networks[networkId]
if (networkData) {
const marketplace = new web3.eth.Contract(Marketplace.abi,networkData.address);
// console.log(marketplace);
setMarketplace(marketplace);
const productCount = await marketplace.methods.productCount().call();
// console.log(productCount.toString());
setProductCount(productCount);
for (var i = 1; i <= productCount; i++) {
const product = await marketplace.methods.products(i).call();
setProducts([...productList,product]);
console.log(productList);
}
setLoading(false);
} else {
window.alert("Marketplace contract not deployed to detected network.");
// setloading2(true);
}
};
另外,点击购买按钮后需要手动刷新页面,将Buy
按钮改为Owned
,状态不会自动更新,如何实现。
感谢您回答这么长的问题,但任何帮助将不胜感激。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)