TypeError: Cannot read property 'methods' of 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: 无法读取属性 'methods' 的 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]

查看已编译

提交

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

首先：你的this.state.contract的初始状态是null，所以首先检查它是否不是null

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

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

Answer 2

您需要检查合同方法返回的内容。就我而言，我已经通过将方法中的输出从 Array 更改为 this 来解决它。

const abi = [
    {
      constant: true,
      inputs: [],
      name: 'manager',
      outputs: [{ name: '', type: 'address' }], 
      payable: false,
      stateMutability: 'view',
      type: 'function',
    }]

TypeError: Cannot read property 'methods' of null

TypeError: Cannot read property 'methods' of null

javascript

reactjs

blockchain

ethereum

web3