node.js - 该合约对象尚未设置地址，请先设置地址

Question

我试图学习如何使用 web3 开发加密货币，但我遇到了一些麻烦。一切都完成了，但是当我尝试在我的网站上交换硬币时，它就坏了。我已经尝试对地址进行硬编码，但我得到了同样的错误。

我使用带有元掩码的 Firefox

操作系统

完全错误

App/_this.buyTokens src/components/App.js:72

  70 | buyTokens = (etherAmount) => {
  71 |   this.setState({ loading: true })
> 72 |   this.state.cypherSite.methods.buyTokens().send({value: etherAmount, from: this.state.account}).on('transactionHash', (hash) => {
     | ^  73 |     this.setState({loading: false})
  74 |   })
  75 | }
onSubmit
src/components/BuyForm.js:23

  20 |   let etherAmount 
  21 |   etherAmount = this.input.value.toString()
  22 |   etherAmount = window.web3.utils.toWei(etherAmount, 'Ether')
> 23 |   this . props . buyTokens(etherAmount)

应用程序.js

class App extends Component {

  async loadBlockchainData(){
    const web3 = window.web3
    const accounts = await web3.eth.getAccounts()
    
    this.setState({account: accounts[0]})
    //console.log(this.state.account)

    const ethBalance = await web3.eth.getBalance(this.state.account)
    this.setState({ethBalance: ethBalance})
    
    const networkId = await web3.eth.net.getId()
    const coinData = CypherCoin.networks[networkId]
    if(coinData){
    const coin = new web3.eth.Contract(CypherCoin.abi, coinData.address)
    this.setState({coin})
    let coinBalance = await coin.methods.balanceOf(this.state.account).call()
    //console.log("coin balance", coinBalance.toString())
    this.setState({coinBalance: coinBalance.toString()})
    //console.log("coin add: ", coin)
    }
    else{
      window.alert('Token contrat not deployed to detected network.')
    }

    const siteData = CypherSite.networks[networkId]
    if(siteData){
    const cypherSite = new web3.eth.Contract(CypherSite.abi, CypherSite.address)
    this.setState({cypherSite: cypherSite})
    console.log(this.state.cypherSite)
    }
    else{
      window.alert('CypherSite contrat not deployed to detected network.')
    }

    //console.log(this.state.cypherSite)
    this.setState({loading: false})
  }

  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.ethereum)
    }
    else{
      window.alert('Non-Ethereum browser detected. You should consider trying MetaMask.')
    }
  }

  buyTokens = (etherAmount) => {
    this.setState({ loading: true })
    this.state.cypherSite.methods.buyTokens().send({value: etherAmount, from: this.state.account}).on('transactionHash', (hash) => {
      this.setState({loading: false})
    })
  }

  constructor(props){
    super(props);
    this.state = { 
      account: '', 
      coin: {},
      cypherSite: {},
      ethBalance: '0',
      coinBalance: '0',
      loading: true
    };
  }

  render() {

    let content
    
    if(this.state.loading){
      content = <p id="loader" className="text-center">Loading...</p>
    }
    else{
      content = <Main 
      ethBalance={this.state.ethBalance} 
      coinBalance={this.state.coinBalance}
      buyTokens={this.buyTokens}
      />
    }
  }
}

export default App;

主.js

class Main extends Component {

  constructor(props){
    super(props)
    this.state = {
      output: '0'
    }
  }
  
  render() {
    return (
      <div id="content">

        <div className="card mb-4">

        <div className="card-body">

          < BuyForm 
          ethBalance={this.props.ethBalance}
          coinBalance={this.props.coinBalance}
          buyTokens={this.props.buyTokens}
          />
        </div>
</div>

      </div>
    );
  }
}

export default Main;

标签： node.jsreactjsnpmweb3jsmetamask