Estoy tratando de enviar accesorios a mi componente de clase. Así que en el componente principal:
<Child contract={_contract}/>Envié los accesorios así.
Y en el componente secundario en una de mis funciones, llamo al accesorio de esta manera:
class Mint extends React.Component { constructor() { super(); this.state = { balance: [], }; } async componentDidMount() { await axios.get(`https://api.cronoscan.com/api?module=stats&action=tokensupply&contractaddress=${ADDRESS}&apikey=${apikey}`) .then(output => { this.setState({ balance: output.data.result }) }) } mintNft = async () => { var _mintAmount = Number(document.querySelector("[name=amount]").value); var mintRate = Number(await this.props.contract.methods.cost().call()); var totalAmount = mintRate * _mintAmount; this.props.contract.methods.mint( localStorage .getItem('walletAddress'), _mintAmount) .send({ from: JSON.parse(localStorage.getItem('walletAddress')), value: String(totalAmount) }); } render() { const { balance } = this.state; const { nftdata } = this.state; return ( <button onClick={mintNft}>Mint</button> ); } } export default Mint;pero da un error Uncaught (en promesa) TypeError: No se pueden leer las propiedades de undefined (leyendo 'props')
Esperando sus respuestas. Gracias.
Por favor cámbialo
async function func() { var mintRate = Number(await this.props.contract.methods.cost().call()); };A
const func = async () => { var mintRate = Number(await this.props.contract.methods.cost().call()); };Para comprender este cambio, debe comprender la diferencia entre las funciones de flecha y las funciones generales. Consulte https://betterprogramming.pub/difference- between-regular-functions-and-arrow-functions-f65639aba256
Ejemplo de Codesandbox: https://codesandbox.io/s/laughing-snow-234or7
Si mintNft debe llamarse dentro del componente Mint y acceder a los accesorios de Mint , debe declararse dentro del alcance. Mueva la devolución de llamada mintNft al alcance del componente para que pueda acceder a this del componente Mint y tener un objeto this.props definido.
class Mint extends React.Component { constructor() { super(); this.state = { balance: [], }; } async componentDidMount() { await axios.get(`https://api.cronoscan.com/api?module=stats&action=tokensupply&contractaddress=${ADDRESS}&apikey=${apikey}`) .then(output => { this.setState({ balance: output.data.result }) }) } mintNft = async () => { var _mintAmount = Number(document.querySelector("[name=amount]").value); var mintRate = Number(await this.props.contract.methods.cost().call()); var totalAmount = mintRate * _mintAmount; this.props.contract.methods.mint( localStorage .getItem('walletAddress'), _mintAmount) .send({ from: JSON.parse(localStorage.getItem('walletAddress')), value: String(totalAmount) }); } ... render() { const { balance, nftdata } = this.state; return ( <button onClick={this.mintNft}> // <-- pass as callback Mint </button> ); } }