在 React 组件中渲染返回的 Solidity 映射值

Question

这是一个 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];
  }
}

这是一个 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>
    );
  }
}

预期输出：9
实际输出：未定义

控制台日志未定义，但是在 Remix 中调用 getIntFromMapping 时，它会按预期输出 9。对于这种行为的原因，以及如何正确返回 Solidity 映射值以便在 React 组件中使用，我将不胜感激。

Answer 1

根据您使用的 next.js 版本，您可能需要像这样从 initialProps 返回

return { props:{intFromSolidity} }

由于您使用的是 next 12，因此 getInitialProps 可能会导致问题。我转换成函数式组件，你不需要使用 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>
  );
};