truffle unbox react - 前端無法讀取/設置合約狀態

我遇到了前端無法讀取/設置契約狀態的 Truffle React 樣板程式碼問題。以下是詳細資訊：

我使用truffle unbox react. 我更新了開發主機和埠詳細資訊truffle-config.js以匹配 Ganache 配置，而 Ganache 在後台執行。我成功地truffle compile將truffle migrateSimpleStorage 與 Ganache 簽約。我打開另一個終端並cd進入客戶端文件夾，客戶端文件夾中npm install的最新"web3": "^1.0.0-beta.55"和其他依賴項。然後我用 Ganache 生成的同一個 Mnemonic 登錄我的 MetaMask，這樣我就可以訪問所有的錢包賬戶。我npm start的客戶端和應用程序似乎正在localhost:3000. 除了前端無法讀取/設置合約狀態外，一切都在執行。儲存的值是 0 而不是 5。出了什麼問題？

我不確定這是否是新 web3 版本的問題，但 await 似乎不適用於第 42 行的發送功能。更改以下行使程式碼工作。

在 App.js 中，更改

await contract.methods.set(5).send({ from: accounts[0] });

到

contract.methods.set(51).send({ from: accounts[0] }).then((error, tranasctionHash)=>{alert(tranasctionHash);});

我剛剛解決了諾言。我希望你知道承諾，如果沒有，你可以閱讀它。

您可以參考此連結以查看發送功能的多種工作方式。

或者，您可以傳遞一個回調函式，它的工作原理如下所示。

contract.methods.set(51).send({ from: accounts[0] }, (error, tranasctionHash)=>{alert(tranasctionHash);});

第二次更改 現在聲明

const response = await contract.methods.get().call();

將返回一個 BigNumber。您需要將 Solidity BigNumber 轉換為普通數字，以便 react/javascript 可以顯示它。因此，以下語句更改

this.setState({ storageValue:response});

到

this.setState({ storageValue:this.state.web3.utils.hexToNumber(this.state.web3.utils.toHex(response))});

我已經嘗試過我的回購它工作正常。

在這裡查看差異。

我的回購在分支 logeekal_so_response 中。如果您需要更多幫助，請告訴我。

引用自：https://ethereum.stackexchange.com/questions/70864