Aquí hay un contrato de Solidity:
pragma solidity ^0.8.7; contract SomeContract { address public manager; uint public theNumberNine; mapping (string => mapping (address => uint)) public stringToAddrToInt; constructor() { manager = msg.sender; theNumberNine = 9; } function setInt(string memory someString) public { stringToAddrToInt[someString][msg.sender] = theNumberNine; } function getIntFromMapping(string memory someString) public view returns (uint) { return stringToAddrToInt[someString][msg.sender]; } }Aquí hay una interfaz JSX:
import React, { Component } from 'react'; import { Button } from 'semantic-ui-react'; import SomeContract from 'someContract'; import Web3 from 'web3'; class SomeClass extends Component { static async getInitialProps(props) { const { address, myString } = props.query; const contractInstance = SomeContract(address); const provider = new Web3.providers.HttpProvider( 'https://kovan.infura.io/my-endpoint-here' ); const web3 = new Web3(provider); const accounts = await web3.eth.getAccounts(); await contractInstance.methods.setInt(myString).send({ from: accounts[0] }); const intFromSolidity = await contractInstance.methods.getIntFromMapping(myString).call(); return { intFromSolidity }; } onSubmit = async () => { console.log(this.props.intFromSolidity); } render() { return ( <Button basic onClick={this.onSubmit}> I should output 9 </Button> ); } } Salida esperada: 9
Salida real: indefinido
El registro de la consola no está definido, pero cuando llama a getIntFromMapping en Remix, genera 9 como se esperaba. Agradecería un poco de información sobre el motivo de este comportamiento y cómo devolver correctamente los valores de mapeo de solidez para usar en los componentes de React.
Dependiendo de la versión de next.js que esté utilizando, es posible que deba regresar de initialProps como este
return { props:{intFromSolidity} }Dado que está utilizando los próximos 12, getInitialProps podría estar causando problemas. Me convertí en un componente funcional y no necesita usar getInitialProps.
import { useEffect, useState } from "react"; const MyComponent = (props) => { //useEffect runs before compoent is loaded, so when loaded provider will be available const [provider, setProvider] = useState(null); const [accounts, setAccounts] = useState(null); const [solidityInt, setSolidityInt] = useState(null); const { address, myString } = props.query; useEffect(() => { const loadContract = async () => { setProvider( new Web3.providers.HttpProvider( "https://kovan.infura.io/my-endpoint-here" ) ); if (provider) { const web3 = new Web3(provider); const accounts = await web3.eth.getAccounts(); setAccounts(accounts); const contractInstance = SomeContract(address); await contractInstance.methods.setInt(myString).send({ from: accounts[0], }); const intFromSolidity = await contractInstance.methods .getIntFromMapping(myString) .call(); setSolidityInt(intFromSolidity); } }; await loadContract(); }, [provider]); const onSubmit = async () => { console.log(intFromSolidity); }; return ( <Button basic onClick={onSubmit}> I should output 9 </Button> ); };