將基於反應類的組件轉換為基於功能的組件

Question

我是學習反應的新手，我很難將 class 組件轉換為功能組件以了解問題和分析。 我想使用函數式方法來理解狀態和生命周期方法在鈎子的概念中是如何工作的。

import React, { Component } from "react";
import { ButtonGroup, Button } from "react-bootstrap";
import "./MinterBody.css";
import axios from "axios";


var account = null;
var contract = null;
var vaultcontract = null;
var web3 = null;

const NFTCONTRACT = "0xC6Ad2824B03275D4cC5E8f4f61c5a143b999717b";
const STAKINGCONTRACT = "0x09aE75315fE2E63271B4F218C4b00F4fF143052A"
const polygonscanapikey = "DBQX5JUSAVUZRK8CC4IN2UZF9N2HA63P4U";
const polygonscanapi = "https://api-testnet.polygonscan.com/api"
const moralisapi = "https://deep-index.moralis.io/api/v2/";
const moralisapikey = "2VBV4vaCLiuGu6Vu7epXKlFItGe3jSPON8WV4CrXKYaNBEazEUrf1xwHxbrIo1oM";
const nftpng = "https://ipfs.io/ipfs/QmavM8Zpo9bD3r4zEnhbbBLLvHyfr1YL7f1faG3ovaeSSG/";


class MinterCard extends Component {

    constructor() {
        super();
        this.state = {
            balance: [],
            nftdata: [],
            rawearn: [],
        };
    }

    handleModal() {
        this.setState({ show: !this.state.show })
    }

    handleNFT(nftamount) {
        this.setState({ outvalue: nftamount.target.value });
    }

    async componentDidMount() {

        await axios.get((polygonscanapi + `?module=stats&action=tokensupply&contractaddress=${NFTCONTRACT}&apikey=${polygonscanapikey}`))
            .then(outputa => {
                this.setState({
                    balance: outputa.data
                })
                console.log(outputa.data)
            })
        let config = { 'X-API-Key': moralisapikey, 'accept': 'application/json' };
        await axios.get((moralisapi + `/nft/${NFTCONTRACT}/owners?chain=mumbai&format=decimal`), { headers: config })
            .then(outputb => {
                const { result } = outputb.data
                this.setState({
                    nftdata: result
                })
                console.log(outputb.data)
            })
    }

    render() {
        const { balance } = this.state;
        const { nftdata } = this.state;
        const { outvalue } = this.state;


        return (

            <div className="container col-lg-11">
                <div className="row items px-3 pt-3">
                    <div className="ml-3 mr-3" style={{ display: "inline-grid", gridTemplateColumns: "repeat(4, 5fr)", columnGap: "20px" }}>
                        {nftdata.map((result, i) => {
                            async function stakeit() {
                                vaultcontract.methods.stake([result.token_id]).send({ from: account });
                            }
                            async function unstakeit() {
                                vaultcontract.methods.unstake([result.token_id]).send({ from: account });
                            }
                            return (
                                <div className="card nft-card mt-3" key={i} >
                                    <div className="image-over">
                                        <img className="card-img-top" src={nftpng + result.token_id + '.png'} alt="" />
                                    </div>
                                    <div className="card-caption col-12 p-0">
                                        <div className="card-body">
                                            <h5 className="mb-0">Net2Dev Collection NFT #{result.token_id}</h5>
                                            <h5 className="mb-0 mt-2">Location Status<p style={{ color: "#39FF14", fontWeight: "bold", textShadow: "1px 1px 2px #000000" }}>{result.owner_of}</p></h5>
                                            <div className="card-bottom d-flex justify-content-between">
                                                <input key={i} type="hidden" id='stakeid' value={result.token_id} />
                                                <Button style={{ marginLeft: '2px', backgroundColor: "#ffffff10" }} onClick={stakeit}>Stake it</Button>
                                                <Button style={{ marginLeft: '2px', backgroundColor: "#ffffff10" }} onClick={unstakeit}>Unstake it</Button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>
            </div>
        );
    };
}

export default MinterCard;

我會很感激你的幫助。 請，如果你能轉換，我將不勝感激

Answer 1

import React, { Component, useState } from "react";
import { ButtonGroup, Button } from "react-bootstrap";
import "./MinterBody.css";
import axios from "axios";



const  MinterCard =()=> {
cosnt [myState, setMyState] = useState()
var account = null;
var contract = null;
var vaultcontract = null;
var web3 = null;

const NFTCONTRACT = "0xC6Ad2824B03275D4cC5E8f4f61c5a143b999717b";
const STAKINGCONTRACT = "0x09aE75315fE2E63271B4F218C4b00F4fF143052A"
const polygonscanapikey = "DBQX5JUSAVUZRK8CC4IN2UZF9N2HA63P4U";
const polygonscanapi = "https://api-testnet.polygonscan.com/api"
const moralisapi = "https://deep-index.moralis.io/api/v2/";
const moralisapikey = "2VBV4vaCLiuGu6Vu7epXKlFItGe3jSPON8WV4CrXKYaNBEazEUrf1xwHxbrIo1oM";
const nftpng = "https://ipfs.io/ipfs/QmavM8Zpo9bD3r4zEnhbbBLLvHyfr1YL7f1faG3ovaeSSG/";

    await axios.get((polygonscanapi + `?module=stats&action=tokensupply&contractaddress=${NFTCONTRACT}&apikey=${polygonscanapikey}`))
        .then(outputa => {
            setMyState({
                balance: outputa.data
            })
            console.log(outputa.data)
        })
    let config = { 'X-API-Key': moralisapikey, 'accept': 'application/json' };
    await axios.get((moralisapi + `/nft/${NFTCONTRACT}/owners?chain=mumbai&format=decimal`), { headers: config })
        .then(outputb => {
            const { result } = outputb.data
            setMyState({
                nftdata: result
            })
            console.log(outputb.data)
        })
    return (

        <div className="container col-lg-11">
            <div className="row items px-3 pt-3">
                <div className="ml-3 mr-3" style={{ display: "inline-grid", gridTemplateColumns: "repeat(4, 5fr)", columnGap: "20px" }}>
                    {nftdata.map((result, i) => {
                        async function stakeit() {
                            vaultcontract.methods.stake([result.token_id]).send({ from: account });
                        }
                        async function unstakeit() {
                            vaultcontract.methods.unstake([result.token_id]).send({ from: account });
                        }
                        return (
                            <div className="card nft-card mt-3" key={i} >
                                <div className="image-over">
                                    <img className="card-img-top" src={nftpng + result.token_id + '.png'} alt="" />
                                </div>
                                <div className="card-caption col-12 p-0">
                                    <div className="card-body">
                                        <h5 className="mb-0">Net2Dev Collection NFT #{result.token_id}</h5>
                                        <h5 className="mb-0 mt-2">Location Status<p style={{ color: "#39FF14", fontWeight: "bold", textShadow: "1px 1px 2px #000000" }}>{result.owner_of}</p></h5>
                                        <div className="card-bottom d-flex justify-content-between">
                                            <input key={i} type="hidden" id='stakeid' value={result.token_id} />
                                            <Button style={{ marginLeft: '2px', backgroundColor: "#ffffff10" }} onClick={stakeit}>Stake it</Button>
                                            <Button style={{ marginLeft: '2px', backgroundColor: "#ffffff10" }} onClick={unstakeit}>Unstake it</Button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        );
                    })}
                </div>
            </div>
        </div>
    );
}

導出默認的 MinterCard；