TypeError: невозможно прочитать методы свойства со значением null - PullRequest
Новая
       76

TypeError: невозможно прочитать методы свойства со значением null

1 голос
/ 27 мая 2020

Я работаю над очень базовым c erc721 токеном minting dapp с использованием react и web3. Я создал стрелочную функцию для чеканки жетонов, но все время получаю сообщение об ошибке, что методы не определены, когда я пытаюсь чеканить новый жетон ... Я все еще новичок, поэтому прошу прощения, если есть какие-либо ошибки ладьи ie.

мой код реакции 

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: не удается прочитать «методы» свойства нулевого приложения. 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 кадра стека свернуты. Этот экран виден только в разработке. Он не появится, если приложение выйдет из строя в процессе производства. Откройте консоль разработчика в браузере, чтобы проверить эту ошибку.

1 Ответ

0 голосов
/ 27 мая 2020

Первый: ваше начальное состояние this.state.contract равно null, поэтому сначала проверьте, не null 

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

Второй: В вашем коде нет такого кода, который устанавливает this.state.contract, проверьте также

...