타사 웹사이트에서 데이터를 가져오고 표시하는 React 함수 코딩

Question

블록체인에서 정보를 가져와 브라우저에 표시할 수 있도록 도와주세요. React에서 이 thirdweb 함수를 호출하는 방법을 알고 싶습니다. 아래 코드는 우리 시스템에서 사용자를 생성하는 데 사용되는 Solidity 코드입니다.

function createUser(string memory _userId, string memory _fName, string memory _lName, string memory _mobile, string memory _dob, uint256 _age, string memory _nationality, string memory _gender ) 공공의 {
        if(!chkexisitinguserId(_userId)){
            users[_userId] = 사용자(_fName, _lName, _mobile, _dob, _age,_nationality,_gender);
            noofUser++;
            allUserId[k] = _userId;
            k++;
        }
    }

function getUser(string memory _userId) 공개 뷰는 (문자열 메모리, 문자열 메모리, 문자열 메모리, 문자열 메모리, uint256, 문자열 메모리, 문자열 메모리)를 반환합니다.
        사용자 메모리 사용자 = users[_userId];
        return (user.fName, user.lName, user.mobile, user.dob, user.age, user.nationality, user.gender);
    }

다음 코드는 스마트 계약과 상호작용하는 세 번째 웹 라이브러리 코드입니다. 아래 코드는 Refer.js 파일에 저장되어 있습니다.

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

기본 함수 내보내기 Component() {
  const { 계약 } = useContract("0xBB417720eBc8b76AdeAe2FF4670bbc650C3E791f");
  const { mutateAsync: createUser, isLoading } = useContractWrite(contract, "createUser")

  const 호출 = 비동기 () =>
    노력하다 {
      const data = wait createUser([ "John0312", "John", "s", "8090890367", "03-11-2000", 20, "India", "M" ]);
      console.info("계약 호출 성공", data);
    } 잡기 (오류) {
      console.error("계약 호출 실패", err);
    }
    
  }
}

기본 함수 내보내기 Component() {
  const { 계약 } = useContract("0xBB417720eBc8b76AdeAe2FF4670bbc650C3E791f");
  const { data, isLoading } = useContractRead(계약, "getUser", _userId)
}

스마트 계약이 thirdweb에 배포되어 액세스를 시도하고 있습니다. app.js에서 이 "호출" 비동기 함수를 호출하는 방법에 대해 고민하고 있습니다.

'react'에서 React, { useEffect } 가져오기
함수 앱(){
const 핸들클릭 = 비동기 (e) =>
    통화를 기다립니다();
  }
 반품 (
<button onClick={handleclick}>나를 클릭하세요</button>
  )
}

기본 앱 내보내기

정의되지 않은 함수 호출()과 같은 오류가 발생합니다.

Answer 1

새로운 훅을 생성하겠습니다(useCall.js)，它的作用仅仅是实例化 useContract 和 useContractWrite 钩子，然后为您在任何组件中使用定义 call()방법.

이 예에서는 call() 是从钩子中返回的唯一内容。它被包裹在 useCallback 中，以确保它只在 createUser가 정의되면 정의됩니다.

으아악

이제 모든 구성 요소에서 이 후크를 사용하여 call() 기능을 얻을 수 있습니다.

으아악