Codage des fonctions React pour obtenir et afficher des données provenant de sites Web tiers-Questions et réponses sur le réseau chinois PHP

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); } 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. 
 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) } 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. 
 importer React, { useEffect } depuis 'react' fonction App(){ const handleclick = async (e) => attendre l'appel(); } retour (  ) } exporter l'application par défaut
 Il génère une erreur comme un appel de fonction non 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; }

répondre à tous (1)

P粉1067157032023-08-30 13:26:13 1 plancher

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

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

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

import useCall from './useCall'; export default function Component() { const call = useCall(); useEffect(() => { (async () => { await call(); })(); }, []); }