将基于类的react组件转换为基于功能的组件

Question

我刚开始学习react，在将类组件转换为功能组件以理解问题和分析问题时遇到了困难。我想用函数方法来理解状态和生命周期方法，这在hooks的概念中是如何工作的。

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;