从 React 调用合约方法

Question

我是 React 和 NEAR 的新手，正在尝试了解我的前端 React 应用程序如何调用合约上的方法。

在 near cli 中我可以调用 near view $NFT_CONTRACT_ID nft_total_supply 其中 returns 合约上的 NFT 数量。

如何从 React 调用相同的方法。

我在努力

  export async function CheckSupply() {
    const near = await connect(getConfig);
    const account = await near.account("mytestnetaccount.testnet");
    const supply = window.contract.nft_total_supply();
    console.log("please print this out")
  }

在我的 App.js 中，我现在有一个非常基本的页面，用于测试正在写出 console.log()

const App = () =>{
  window.Buffer = window.Buffer || require("buffer").Buffer;
    const [userHasNFT, setuserHasNFT] = useState(false);  
   
    return (
        <>
        <div className="app">
            <WalletLogin />
            
            <div className="container">
            
                <img
                    alt=""
                    src={Logo}
                    width="360"
                    height="150"
                    className="d-inline-block align-top"
                />

            </div>
</>
};

但是当我启动应用程序时，没有任何内容写入控制台。

我不确定为什么，但认为这是因为未调用函数 CheckSupply，但我希望在呈现应用程序时将其运行。

function CheckSupply() 在我的 utils.js 中并使用 import { CheckSupply } from "./utils";

导入

谢谢

Answer 1

如果你想在 React 功能组件中调用挂载函数，你可以在使用效果中使用空依赖数组调用该函数

查看下面的代码和 link 以了解有关反应中效果的更多信息

import { CheckSupply } from "./utils";
import {useEffect} from 'react';
    
const App = () =>{

window.Buffer = window.Buffer || require("buffer").Buffer;

const [userHasNFT, setuserHasNFT] = useState(false);  

useEffect(()=>{
    CheckSupply();
},[])

return (
    <>
    <div className="app">
        <WalletLogin />
        
        <div className="container">
        
            <img
                alt=""
                src={Logo}
                width="360"
                height="150"
                className="d-inline-block align-top"
            />

        </div>
    </>
};

https://reactjs.org/docs/hooks-effect.html

从 React 调用合约方法

Call contract method from React

reactjs

nearprotocol