編碼React函數以從第三方網站取得並顯示數據
P粉823268006
2023-08-29 21:41:15
<p>幫助我從區塊鏈中獲取資訊並在瀏覽器中顯示。我想知道如何在React中呼叫這個thirdweb函數。
下面的程式碼是用於在我們的系統中建立使用者的Solidity程式碼。 </p>
<pre class="brush:php;toolbar:false;">function createUser(string memory _userId, string memory _fName, string memory _lName, string memory _mobile, string memory _dob, u256 mory string idmob ) public {
if(!chkexisitinguserId(_userId)){
users[_userId] = User(_fName, _lName, _mobile, _dob, _age,_nationality,_gender);
noofUser ;
allUserId[k] = _userId;
k ;
}
}
function getUser(string memory _userId) public view returns (string memory, string memory, string memory, string memory, uint256, string memory, string memory) {
User memory user = users[_userId];
return (user.fName, user.lName, user.mobile, user.dob, user.age, user.nationality, user.gender);
}</pre>
<p>下面的程式碼是與智慧合約互動的thirdweb庫程式碼。下面的程式碼儲存在refer.js檔案中。 </p>
<pre class="brush:php;toolbar:false;">import { useContract, useContractWrite } from "@thirdweb-dev/react";
export default function Component() {
const { contract } = useContract("0xBB417720eBc8b76AdeAe2FF4670bbc650C3E791f");
const { mutateAsync: createUser, isLoading } = useContractWrite(contract, "createUser")
const call = async () => {
try {
const data = await createUser([ "John0312", "John", "s", "8090890367", "03-11-2000", 20, ", "03-11-2000", 20";
console.info("contract call successs", data);
} catch (err) {
console.error("contract call failure", err);
}
}
}
export default function Component() {
const { contract } = useContract("0xBB417720eBc8b76AdeAe2FF4670bbc650C3E791f");
const { data, isLoading } = useContractRead(contract, "getUser", _userId)
}</pre>
<p>智能合約已部署在thirdweb上並嘗試存取它。我卡在如何從app.js中呼叫這個"call"非同步函數。 </p>
<pre class="brush:php;toolbar:false;">import React, { useEffect } from 'react'
function App(){
const handleclick = async (e) => {
await call();
}
return (
<button onClick={handleclick}>click me</button>
)
}
export default App</pre>
<p>它產生了類似未定義函數call()的錯誤。 </p>
我會建立一個新的鉤子(
useCall.js)，它的作用只是實例化useContract和useContractWrite鉤子，然後為您在任何元件中使用定義call()方法。在這個範例中，
call()是從鉤子傳回的唯一內容。它被包裹在useCallback中，以確保它只在createUser被定義時才定義。export default function useCall() { const { contract } = useContract("0xBB417720eBc8b76AdeAe2FF4670bbc650C3E791f"); const { mutateAsync: createUser, isLoading } = useContractWrite(contract, "createUser") const call = React.useCallback(async () => { try { const data = await createUser([ "John0312", "John", "s", "8090890367", "03-11-2000", 20, "India", "M" ]); console.info("contract call successs", data); } catch (err) { console.error("contract call failure", err); } }, [createUser]); return call; }現在在任何元件中，您可以使用這個鉤子並取得
call()函數：import useCall from './useCall'; export default function Component() { const call = useCall(); useEffect(() => { (async () => { await call(); })(); }, []); }