ページ遷移ごとに毎回一度だけ「Unhandled Rejection (TypeError): Cannot read property 'methods' of null」とエラーが出る

Question

#前提・実現したいこと
ReactとSolidityを使ってDAppsを作っています。(アドレスを入力するとそのユーザーの情報が表示されるプログラムです)
ブラウザでReactの動作確認をする際にエラーが発生しています。
エラーはページ遷移するごとに一度だけ表示されます。
毎回リロードをすると正常に動くようになるのですがこの問題を解決したいです。

#発生している問題・エラーメッセージ

エラーメッセージ
Unhandled Rejection (TypeError): Cannot read property 'methods' of null

// アカウント情報の読み込み
  48 | viewRecord = async () => {
  49 |   const { contract, address } = this.state;
> 50 |   const result1 = await contract.methods.viewAccount(address).call();
     | ^  51 |   const result2 = await contract.methods.viewAccount_Transaction(address).call();
  52 |   console.log(result1);
  53 |   console.log(result2);

#該当のソースコード

class Info extends React.Component {


  constructor(props) {
    super(props);
    this.state = {
      web3: null,
      accounts: null,
      contract: null,
      name: null,
      email: null,
      address: "",
      outputName: null,
      outputEmail: null,
      outputNumTransactions: 0,
      outputReputations: 0,
      outputNumSell: 0,
      outputNumBuy: 0,
    };
  }

  componentDidMount = async () => {
    try {
      const web3 = await getWeb3();

      const accounts = await web3.eth.getAccounts();
      const networkId = await web3.eth.net.getId();
      const deployedNetwork = MarketApp.networks[networkId];
      const instance = new web3.eth.Contract(
        MarketApp.abi,
        deployedNetwork && deployedNetwork.address
      );

      this.setState({ web3, accounts, contract: instance });
    } catch (error) {
      alert(
        `Failed to load web3, accounts, or contract. Check console for details.`
      );
      console.error(error);
    }
  };

  // アカウント情報の読み込み
  viewRecord = async () => {
    const { contract, address } = this.state;
    const result1 = await contract.methods.viewAccount(address).call();
    const result2 = await contract.methods.viewAccount_Transaction(address).call();
    console.log(result1);
    console.log(result2);
    const outputName = result1[0];
    const outputEmail = result1[1];
    const outputNumTransactions = result2[0];
    const outputReputations = result2[1];
    const outputNumSell = result2[2];
    const outputNumBuy = result2[3];
    this.setState({ outputName, outputEmail });
    this.setState({ outputNumTransactions, outputReputations, outputNumSell, outputNumBuy });
  };

  handleChange = (name) => (event) => {
    this.setState({ [name]: event.target.value });
  };

  render() {
    return (
      <div className="Info">
        <input
          onChange={this.handleChange("address")}
          placeholder="addressを入力"
        />
        <button onClick={this.viewRecord}>閲覧</button>

        <br />
        <br />

        {this.state.outputName ? <p>Name: {this.state.outputName}</p> : <p></p>}
        {this.state.outputEmail ? (
          <p>Email: {this.state.outputEmail}</p>
        ) : (
            <p></p>
          )}
        {this.state.outputNumTransactions ? <p>取引回数: {this.state.outputNumTransactions}</p> : <p></p>}
        {this.state.outputReputations ? <p>評価: {this.state.outputReputations}</p> : <p></p>}
        {this.state.outputNumSell ? <p>出品回数: {this.state.outputNumSell}</p> : <p></p>}
        {this.state.outputNumBuy ? <p>購入回数: {this.state.outputNumBuy}</p> : <p></p>}
      </div>
    );
  }
}

export default Info;

struct account {
        string name; //名前
        string email; //Emailアドレス
        uint256 numTransactions; //取引回数
        int256 reputations; //取引評価、大きい値ほど良いアカウント
        bool resistered; //アカウント未登録:false, 登録済み:true
        int256 numSell; //出品した商品の数
        int256 numBuy; //購入した商品の数
    }

    address[] public users; // ユーザーのアドレス

    mapping(address => account) accounts;

// アカウント情報（個人情報）
    function viewAccount(address user)
        public
        view
        returns (string memory, string memory)
    {
        string memory _name = accounts[user].name;
        string memory _email = accounts[user].email;

        return (_name, _email);
    }

    // アカウント情報（取引）
    function viewAccount_Transaction(address user)
        public
        view
        returns (
            uint256,
            int256,
            int256,
            int256
        )
    {
        uint256 _numTransactions = accounts[user].numTransactions;
        int256 _reputations = accounts[user].reputations;
        int256 _numSell = accounts[user].numSell;
        int256 _numBuy = accounts[user].numBuy;

        return (_numTransactions, _reputations, _numSell, _numBuy);
    }

#補足情報（FW/ツールのバージョンなど）
Truffle v5.1.37 (core: 5.1.37)
Solidity - 0.5.2 (solc-js)
Node v14.2.0
Web3.js v1.2.1

Answer 1

原因だけの回答になります。
処理の順番のくい違いで生じているエラーだと思います。
Reactでは、componentDidMountはレンダー直後に行われる処理です。
なので、処理は下記のコードの順番になり、

レンダー中の処理

  viewRecord = async () => {
    const { contract, address } = this.state;
　　// ここではcontractがまだ、componentDidMountの処理の中でsetする定義のデータになっていない
    const result1 = await contract.methods.viewAccount(address).call();contract
    const result2 = await contract.methods.viewAccount_Transaction(address).call();
    console.log(result1);
    console.log(result2);
    const outputName = result1[0];
    const outputEmail = result1[1];
    const outputNumTransactions = result2[0];
    const outputReputations = result2[1];
    const outputNumSell = result2[2];
    const outputNumBuy = result2[3];
    this.setState({ outputName, outputEmail });
    this.setState({ outputNumTransactions, outputReputations, outputNumSell, outputNumBuy });
  };

レンダー直後

  componentDidMount = async () => {
    try {
      const web3 = await getWeb3();

      const accounts = await web3.eth.getAccounts();
      const networkId = await web3.eth.net.getId();
      const deployedNetwork = MarketApp.networks[networkId];
      const instance = new web3.eth.Contract(
        MarketApp.abi,
        deployedNetwork && deployedNetwork.address
      );
　　　// ここではじめてcontractにデータの入ったstateがセットされる
      this.setState({ web3, accounts, contract: instance });
    } catch (error) {
      alert(
        `Failed to load web3, accounts, or contract. Check console for details.`
      );
      console.error(error);
    }
  };

以上の処理順になっているため、contractに期待しているmethodsプロパティが見つからずTypeErrorになっている。

Unhandled Rejection (TypeError): Cannot read property 'methods' of null

多分これが原因なんじゃないかなと思います。

リロードの定義はわからないですけど、多分一度componentDidMountが行われた後のリロードだから、エラーが起きてないんじゃないかと思います。

web3やSolidityに明るくないし、Reactも初心者なので、もし間違っていたらすいません。