Codage des fonctions React pour obtenir et afficher des données provenant de sites Web tiers

Question

Aidez-moi à obtenir des informations de la blockchain et à les afficher dans le navigateur. Je veux savoir comment appeler cette fonction ThirdWeb dans React. Le code ci-dessous est le code Solidity utilisé pour créer des utilisateurs dans notre système.

fonction createUser (mémoire de chaîne _userId, mémoire de chaîne _fName, mémoire de chaîne _lName, mémoire de chaîne _mobile, mémoire de chaîne _dob, uint256 _age, mémoire de chaîne _nationalité, mémoire de chaîne _gender ) publique {
        if(!chkexisitinguserId(_userId)){
            users[_userId] = User(_fName, _lName, _mobile, _dob, _age,_nationality,_gender);
            noofUser++;
            allUserId[k] = _userId;
            k++;
        }
    }

la fonction getUser (mémoire de chaîne _userId) renvoie la vue publique (mémoire de chaîne, mémoire de chaîne, mémoire de chaîne, mémoire de chaîne, uint256, mémoire de chaîne, mémoire de chaîne) {
        Mémoire utilisateur user = users[_userId];
        return (user.fName, user.lName, user.mobile, user.dob, user.age, user.nationality, user.gender);
    }</pré>
<p>Le code suivant est le code de la troisième bibliothèque Web qui interagit avec les contrats intelligents. Le code ci-dessous est stocké dans le fichier refer.js. </p>
<pre class="brush:php;toolbar:false;">import { useContract, useContractWrite } depuis "@thirdweb-dev/react";

exporter la fonction par défaut Component() {
  const { contrat } = useContract("0xBB417720eBc8b76AdeAe2FF4670bbc650C3E791f");
  const { mutateAsync : createUser, isLoading } = useContractWrite (contrat, "createUser")

  const appel = async () =>
    essayer {
      const data = wait createUser([ "John0312", "John", "s", "8090890367", "03-11-2000", 20, "Inde", "M" ]);
      console.info("succès des appels de contrat", données);
    } attraper (erreur) {
      console.error("échec de l'appel du contrat", err);
    }
    
  }
}

exporter la fonction par défaut Component() {
  const { contrat } = useContract("0xBB417720eBc8b76AdeAe2FF4670bbc650C3E791f");
  const { data, isLoading } = useContractRead (contrat, "getUser", _userId)
}</pré>
<p>Le contrat intelligent a été déployé sur ThirdWeb et tente d'y accéder. Je ne sais pas comment appeler cette fonction asynchrone "appeler" depuis app.js. </p>
<pre class="brush:php;toolbar:false;">importer React, { useEffect } depuis 'react'
fonction App(){
const handleclick = async (e) =>
    attendre l'appel();
  }
 retour (
<button onClick={handleclick}>cliquez sur moi</button>
  )
}

exporter l'application par défaut

Il génère une erreur comme un appel de fonction non défini ().

Answer 1

Je vais créer un nouveau crochet (méthode useCall.js)，它的作用仅仅是实例化 useContract 和 useContractWrite 钩子，然后为您在任何组件中使用定义 call().

Dans cet exemple, call() 是从钩子中返回的唯一内容。它被包裹在 useCallback 中，以确保它只在 createUser est défini lorsqu'il est défini.

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

Maintenant, dans n'importe quel composant, vous pouvez utiliser ce hook et obtenir la fonction call() :

import useCall from './useCall';

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

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