Coding React berfungsi untuk mendapatkan dan memaparkan data daripada tapak web pihak ketiga

Question

Bantu saya mendapatkan maklumat daripada blokchain dan paparkannya dalam penyemak imbas. Saya ingin tahu cara memanggil fungsi web ketiga ini dalam React. Kod di bawah ialah kod Solidity yang digunakan untuk mencipta pengguna dalam sistem kami.

fungsi createUser(memori rentetan _userId, memori rentetan _fName, memori rentetan _lName, memori rentetan _mudah alih, memori rentetan _dob, uint256 _umur, memori rentetan _kewarganegaraan, memori rentetan _jantina ) awam {
        if(!chkexisitinguserId(_userId)){
            pengguna[_userId] = Pengguna(_fName, _lName, _mobile, _dob, _umur,_kewarganegaraan,_jantina);
            noofUser++;
            allUserId[k] = _userId;
            k++;
        }
    }

fungsi getUser(memori rentetan _userId) paparan awam kembali (memori rentetan, memori rentetan, memori rentetan, memori rentetan, uint256, memori rentetan, memori rentetan) {
        Pengguna memori pengguna = pengguna[_userId];
        kembali (user.fName, user.lName, user.mobile, user.dob, user.age, user.nationality, user.gender);
    }

Kod berikut ialah kod perpustakaan web ketiga yang berinteraksi dengan kontrak pintar. Kod di bawah disimpan dalam fail refer.js.

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

eksport fungsi lalai Komponen() {
  const { kontrak } = useContract("0xBB417720eBc8b76AdeAe2FF4670bbc650C3E791f");
  const { mutateAsync: createUser, isLoading } = useContractWrite(contract, "createUser")

  panggilan const = async () =>
    cuba {
      data const = menunggu createUser([ "John0312", "John", "s", "8090890367", "03-11-2000", 20, "India", "M" ]);
      console.info("kejayaan panggilan kontrak", data);
    } tangkap (err) {
      console.error("panggilan kontrak gagal", err);
    }
    
  }
}

eksport fungsi lalai Komponen() {
  const { kontrak } = useContract("0xBB417720eBc8b76AdeAe2FF4670bbc650C3E791f");
  const { data, isLoading } = useContractRead(kontrak, "getUser", _userId)
}

Kontrak pintar telah digunakan pada thirdweb dan cuba mengaksesnya. Saya buntu tentang cara memanggil fungsi async "panggilan" ini daripada app.js.

import React, { useEffect } daripada 'react'
fungsi Apl(){
const handleclick = async (e) =>
    tunggu panggilan();
  }
 kembali (
<butang onClick={handleclick}>klik saya</button>
  )
}

eksport lalai App

Ia menjana ralat seperti undefined function call().

Answer 1

Saya akan mencipta cangkuk baharu (kaedah useCall.js)，它的作用仅仅是实例化 useContract 和 useContractWrite 钩子，然后为您在任何组件中使用定义 call().

Dalam contoh ini, call() 是从钩子中返回的唯一内容。它被包裹在 useCallback 中，以确保它只在 createUser ditakrifkan apabila ia ditakrifkan.

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;
}

Kini dalam mana-mana komponen anda boleh menggunakan cangkuk ini dan dapatkan fungsi call():

import useCall from './useCall';

export default function Component() {
  const call = useCall();

  useEffect(() => {
    (async () => {
      await call();
    })();
  }, []);
}