サードパーティの Web サイトからデータを取得して表示するための React 関数のコーディング

Question

ブロックチェーンから情報を取得してブラウザに表示するのを手伝ってください。 React でこの thirdweb 関数を呼び出す方法を知りたいです。 以下のコードは、システム内でユーザーを作成するために使用される Solidity コードです。

function createUser(string メモリ _userId、string メモリ _fName、string メモリ _lName、string メモリ _mobile、string メモリ _dob、uint256 _age、string メモリ _nationality、string メモリ _gender ） 公共 {
        if(!chkexisitinguserId(_userId)){
            users[_userId] = ユーザー(_fName, _lName, _mobile, _dob, _age,_nationality,_gender);
            noofUser;
            allUserId[k] = _userId;
            k ;
        }
    }

関数 getUser(string メモリ _userId) パブリック ビューが返す (文字列メモリ、文字列メモリ、文字列メモリ、文字列メモリ、uint256、文字列メモリ、文字列メモリ) {
        ユーザーメモリ user = users[_userId];
        return (user.fName、user.lName、user.mobile、user.dob、user.age、user.nationality、user.gender);
    }

次のコードは、スマート コントラクトと対話する 3 番目の Web ライブラリ コードです。以下のコードは、refer.js ファイルに保存されています。

import { useContract, useContractWrite } from "@thirdweb-dev/react";

デフォルト関数のエクスポート Component() {
  const { コントラクト } = useContract("0xBB417720eBc8b76AdeAe2FF4670bbc650C3E791f");
  const { mutateAsync: createUser, isLoading } = useContractWrite(contract, "createUser")

  const call = async () => {
    試す {
      const data = await createUser([ "John0312", "John", "s", "8090890367", "03-11-2000", 20, "インド", "M" ]);
      console.info("契約呼び出しの成功", data);
    } キャッチ (エラー) {
      console.error("契約呼び出しの失敗"、エラー);
    }
    
  }
}

デフォルト関数のエクスポート Component() {
  const { コントラクト } = useContract("0xBB417720eBc8b76AdeAe2FF4670bbc650C3E791f");
  const { data, isLoading } = useContractRead(contract, "getUser", _userId)
}

スマート コントラクトが thirdweb にデプロイされ、アクセスしようとしています。 app.js からこの「call」非同期関数を呼び出す方法に行き詰まっています。

import React, { useEffect } from 'react'
関数 App(){
const handleclick = async (e) => {
    呼び出しを待ちます();
  }
 戻る （
<button onClick={handleclick}>クリックしてください</button>
  ）
}

デフォルトのアプリをエクスポート

未定義の関数call()のようなエラーが発生します。

Answer 1

新しいフック (useCall.js) を作成します。このフックは、useContract フックと useContractWrite フックをインスタンス化し、自動的に実行します。定義された # を使用します。任意のコンポーネントの ##call() メソッド。

この例では、フックから返されるのは

call() だけです。これは、createUser が定義されている場合にのみ定義されるように、useCallback でラップされています。 リーリー

これで、どのコンポーネントでもこのフックを使用して

call() 関数を取得できるようになります: リーリー