DApps開発中のreactのエラーについて

前提・実現したいこと

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);

該当のソースコード

react
1class Info extends React.Component {
2
3
4  constructor(props) {
5    super(props);
6    this.state = {
7      web3: null,
8      accounts: null,
9      contract: null,
10      name: null,
11      email: null,
12      address: "",
13      outputName: null,
14      outputEmail: null,
15      outputNumTransactions: 0,
16      outputReputations: 0,
17      outputNumSell: 0,
18      outputNumBuy: 0,
19    };
20  }
21
22  componentDidMount = async () => {
23    try {
24      const web3 = await getWeb3();
25
26      const accounts = await web3.eth.getAccounts();
27      const networkId = await web3.eth.net.getId();
28      const deployedNetwork = MarketApp.networks[networkId];
29      const instance = new web3.eth.Contract(
30        MarketApp.abi,
31        deployedNetwork && deployedNetwork.address
32      );
33
34      this.setState({ web3, accounts, contract: instance });
35    } catch (error) {
36      alert(
37        `Failed to load web3, accounts, or contract. Check console for details.`
38      );
39      console.error(error);
40    }
41  };
42
43  // アカウント情報の読み込み
44  viewRecord = async () => {
45    const { contract, address } = this.state;
46    const result1 = await contract.methods.viewAccount(address).call();
47    const result2 = await contract.methods.viewAccount_Transaction(address).call();
48    console.log(result1);
49    console.log(result2);
50    const outputName = result1[0];
51    const outputEmail = result1[1];
52    const outputNumTransactions = result2[0];
53    const outputReputations = result2[1];
54    const outputNumSell = result2[2];
55    const outputNumBuy = result2[3];
56    this.setState({ outputName, outputEmail });
57    this.setState({ outputNumTransactions, outputReputations, outputNumSell, outputNumBuy });
58  };
59
60  handleChange = (name) => (event) => {
61    this.setState({ [name]: event.target.value });
62  };
63
64  render() {
65    return (
66      <div className="Info">
67        <input
68          onChange={this.handleChange("address")}
69          placeholder="addressを入力"
70        />
71        <button onClick={this.viewRecord}>閲覧</button>
72
73        <br />
74        <br />
75
76        {this.state.outputName ? <p>Name: {this.state.outputName}</p> : <p></p>}
77        {this.state.outputEmail ? (
78          <p>Email: {this.state.outputEmail}</p>
79        ) : (
80            <p></p>
81          )}
82        {this.state.outputNumTransactions ? <p>取引回数: {this.state.outputNumTransactions}</p> : <p></p>}
83        {this.state.outputReputations ? <p>評価: {this.state.outputReputations}</p> : <p></p>}
84        {this.state.outputNumSell ? <p>出品回数: {this.state.outputNumSell}</p> : <p></p>}
85        {this.state.outputNumBuy ? <p>購入回数: {this.state.outputNumBuy}</p> : <p></p>}
86      </div>
87    );
88  }
89}
90
91export default Info;
92

solidity
1struct account {
2        string name; //名前
3        string email; //Emailアドレス
4        uint256 numTransactions; //取引回数
5        int256 reputations; //取引評価、大きい値ほど良いアカウント
6        bool resistered; //アカウント未登録:false, 登録済み:true
7        int256 numSell; //出品した商品の数
8        int256 numBuy; //購入した商品の数
9    }
10
11    address[] public users; // ユーザーのアドレス
12
13    mapping(address => account) accounts;
14
15// アカウント情報（個人情報）
16    function viewAccount(address user)
17        public
18        view
19        returns (string memory, string memory)
20    {
21        string memory _name = accounts[user].name;
22        string memory _email = accounts[user].email;
23
24        return (_name, _email);
25    }
26
27    // アカウント情報（取引）
28    function viewAccount_Transaction(address user)
29        public
30        view
31        returns (
32            uint256,
33            int256,
34            int256,
35            int256
36        )
37    {
38        uint256 _numTransactions = accounts[user].numTransactions;
39        int256 _reputations = accounts[user].reputations;
40        int256 _numSell = accounts[user].numSell;
41        int256 _numBuy = accounts[user].numBuy;
42
43        return (_numTransactions, _reputations, _numSell, _numBuy);
44    }