Coding React-Funktionen zum Abrufen und Anzeigen von Daten von Websites Dritter
P粉823268006
P粉823268006 2023-08-29 21:41:15
0
1
683
<p>Helfen Sie mir, Informationen aus der Blockchain abzurufen und im Browser anzuzeigen. Ich möchte wissen, wie man diese Thirdweb-Funktion in React aufruft. Der folgende Code ist der Solidity-Code, der zum Erstellen von Benutzern in unserem System verwendet wird. </p> <pre class="brush:php;toolbar:false;">function createUser(string-Speicher _userId, String-Speicher _fName, String-Speicher _lName, String-Speicher _mobile, String-Speicher _dob, uint256 _age, String-Speicher _nationality, String-Speicher _gender ) öffentlich { if(!chkexisitinguserId(_userId)){ Users[_userId] = User(_fName, _lName, _mobile, _dob, _age,_nationality,_gender); noofUser++; allUserId[k] = _userId; k++; } } Funktion getUser(String-Speicher _userId) öffentliche Ansicht gibt zurück (String-Speicher, String-Speicher, String-Speicher, String-Speicher, uint256, String-Speicher, String-Speicher) { Benutzerspeicher user = users[_userId]; return (user.fName, user.lName, user.mobile, user.dob, user.age, user.nationality, user.gender); }</pre> <p>Der folgende Code ist der Code der dritten Webbibliothek, der mit Smart Contracts interagiert. Der folgende Code ist in der Datei refer.js gespeichert. </p> <pre class="brush:php;toolbar:false;">import { useContract, useContractWrite } from "@thirdweb-dev/react"; Exportieren Sie die Standardfunktion Component() { const { Contract } = useContract("0xBB417720eBc8b76AdeAe2FF4670bbc650C3E791f"); const { mutateAsync: createUser, isLoading } = useContractWrite(contract, "createUser") const call = async () => versuchen { const data = waiting createUser([ „John0312“, „John“, „s“, „8090890367“, „03-11-2000“, 20, „India“, „M“ ]); console.info("Erfolge von Vertragsaufrufen", Daten); } Catch (Err) { console.error("Vertragsaufruffehler", err); } } } Exportieren Sie die Standardfunktion Component() { const { Contract } = useContract("0xBB417720eBc8b76AdeAe2FF4670bbc650C3E791f"); const { data, isLoading } = useContractRead(contract, "getUser", _userId) }</pre> <p>Der Smart Contract wurde auf Thirdweb bereitgestellt und versucht, darauf zuzugreifen. Ich weiß nicht, wie ich diese asynchrone „Aufruf“-Funktion von app.js aufrufen soll. </p> <pre class="brush:php;toolbar:false;">import React, { useEffect } from 'react' Funktion App(){ const handleclick = async (e) => warte auf Anruf(); } zurückkehren ( <button onClick={handleclick}>click me</button> ) } Standard-App</pre> exportieren <p>Es erzeugt einen Fehler wie eine undefinierte Funktion call(). </p>
P粉823268006
P粉823268006

Antworte allen(1)
P粉106715703

我会创建一个新的钩子 (useCall.js),它的作用仅仅是实例化 useContractuseContractWrite 钩子,然后为您在任何组件中使用定义 call() 方法。

在这个例子中,call() 是从钩子中返回的唯一内容。它被包裹在 useCallback 中,以确保它只在 createUser 被定义时才被定义。

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

现在在任何组件中,您可以使用这个钩子并获取 call() 函数:

import useCall from './useCall';

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

  useEffect(() => {
    (async () => {
      await call();
    })();
  }, []);
}
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage