TypeError：无法读取null的属性“方法”

Question

我正在使用React和Web3开发一个非常基础的erc721令牌铸造dapp。我创建了一个箭头函数来铸造令牌，但是当我尝试铸造新令牌时，我仍然收到错误消息，即未定义方法...我仍然是初学者，所以我很抱歉如果有菜鸟错误。

我的反应代码

import React, { Component } from "react";
import AsycentTokenContract from "./contracts/AsycentToken.json";

import Web3 from "web3";

import "./App.css";

class App extends Component {
  state = {account: '', contract: null, totalSupply:0, colors: []};

  async componentWillMount() {
    await this.loadWeb3()
    await this.loadBlockchainData()
  }

  async loadWeb3() {
    if(window.ethereum) {
      window.web3 = new Web3(window.ethereum)
      await window.ethereum.enable()
    }
    else if (window.web3) {
      window.web3 = new Web3(window.web3.currentProvider)
    }
    else {
      window.alert('non Ethereum browser detected. Dowload Metamask')
    }
  }

  async loadBlockchainData() {
    const web3 = window.web3
    //load accounts
    const accounts = await web3.eth.getAccounts()
    this.setState({account: accounts[0]})
    //load contract
    const networkId = await web3.eth.net.getId()
    const networkData =  AsycentTokenContract.networks[networkId]
    if(networkData) {
      const abi = AsycentTokenContract.abi
      const address = networkData.address
      console.log(address)
      const contract = new web3.eth.Contract(abi, address)
      console.log(contract)
      const totalSupply = await contract.methods.totalSupply().call()
      this.setState({totalSupply})
      //Load Colors
      for(var i = 1; i <= totalSupply; i++) {
        const color = await contract.methods.colors(i - 1).call()
        this.setState({
          colors: [...this.state.colors, color]
        })
        console.log(this.state.colors)
      }
    } else{
      window.alert('Smart contract not deployed to detected network')
    }

  }

  mint = (color) => {
    console.log(color)
    this.state.contract.methods.mint(color).send({from: this.state.account})
    .once('receipt', (receipt) => {
      this.setState({
        colors: [...this.state.colors, color]
      })
    })
  }




  render() {
    return (
      <div className="App">
        <h1>{this.state.account}</h1>
        <div>
          <h1>Issue Token</h1>
          <form onSubmit={(e) => {
            e.preventDefault()
            const color = this.color.value
            this.mint(color)
          }}>
            <input 
              type="text"
              placeholder='ex #FFFFFF'
              ref={(input) => {
                this.color = input
              }}
            />
            <input type="submit"
            value="MINT"
            />
          </form>
        </div>
        <div>{this.state.colors.map((color, key) =>{
         return(
            <div key={key}>
              <div className='token' style={{backgroundColor: color}}></div>
              <div>{color}</div>
          </div>)
        })}</div>
      </div>
    );
  }
}

export default App;

智能合约代码

pragma solidity >=0.4.21 <0.7.0;

import "../node_modules/@openzeppelin/contracts/token/ERC721/ERC721.sol";

contract AsycentToken is ERC721 {

    string[] public colors;
    mapping(string => bool) _colorExists;

    string public _name = "AsycentToken";
    string public _symbol = "AT";

    constructor () ERC721(_name, _symbol) public {
    }

    function mint(string memory _color) public {
        require(!_colorExists[_color], 'color already exists');
        colors.push(_color);
        uint _id = colors.length;
        _mint(msg.sender, _id);
        _colorExists[_color] = true;
    }
}

错误

TypeError：无法读取null的属性“方法”App.mint

C:/Users/Shawn/react-nft-minter/client/src/App.js:62
  59 | mint = (color) => {
  60 |   console.log(color)
  61 |   const web3 = window.web3
> 62 |   this.state.contract.methods.mint(color).send({from: this.state.account})
     | ^  63 |   .once('receipt', (receipt) => {
  64 |     this.setState({
  65 |       colors: [...this.state.colors, color]

查看已编译

onSubmit

C:/Users/Shawn/react-nft-minter/client/src/App.js:82
  79 | <form onSubmit={(e) => {
  80 |   e.preventDefault()
  81 |   const color = this.color.value
> 82 |   this.mint(color)
     | ^  83 | }}>
  84 |   <input 
  85 |     type="text"

查看已编译▶22个堆栈框被折叠。该屏幕仅在开发中可见。如果应用在生产中崩溃，它将不会出现。打开浏览器的开发者控制台以进一步检查此错误。

Answer 1

First：您的this.state.contract初始状态为空，因此请首先检查它是否不是null

if(this.state.contract) {
   this.state.contract.methods....

第二：您的代码中没有设置this.state.contract的代码，请同时检查