Unhandled Runtime Error => TypeError: Cannot read properties of undefined (reading 'setState-CodePudding

I ran into this Runtime error which says setState is undefined as I tried to connect to my Rinkeby test network on Metamask. I have tried binding using constructor props but that is not working. I am at loss what to do. Here's my code:

import React, { Component } from 'react'
import { Button, Form, Input, Grid, Message } from 'semantic-ui-react'
import Layout from '../../components/Layout'
import factory from '../../ethereum/factory'
import web3 from '../../ethereum/web3'
import { Router } from '../../routes'

class New extends React.Component {


constructor(props) {
super(props);
this.state = {
    minimumContribution: '',
    errorMessage: '',
    loading: false
  }
this.onSubmit = this.onSubmit.bind(this);
  }

onSubmit = async event => {
event.preventDefault()
const accounts = await web3.eth.getAccounts()
this.setState({ loading: true, errorMessage: '' })

try {
  await factory.methods.createCampaign(this.state.minimumContribution).send({
    from: accounts[0]
  });

  Router.pushRoute('/')
} catch (error) {
  this.setState({ errorMessage: error.message })
}
this.setState({ loading: false })
}

render() {
const { errorMessage, loading } = this.state
return (
  <Layout>
    <Grid centered columns={2}>
      <Grid.Column>
        <h3>Create a Campaign.</h3>
        <Form onSubmit={this.onSubmit} error={!!errorMessage}>
          <Form.Field>
            <lable>Minimum Contribution </lable>
            <Input
              label="WEI"
              labelPosition="right"
              value={this.state.minimumContribution}
              onChange={event=>this.setState({minimumContribution:event.target.value})}
            />
          </Form.Field>
          <Message error header="Oops!" content={errorMessage}/>
          <Button loading={loading} primary>Create</Button>
        </Form>
      </Grid.Column>
    </Grid>
  </Layout>
    )
   }
  }

  export default New

If it does help I am following an ethereum course on Udemy (Ethereum and Solidity: The Complete Developer's Guide). The error occurs at lecture 190.

CodePudding user response：

Looks like the 'this' context is being lost.

add a new method using arrow function

handleChange = event => this.setState({minimumContribution:event.target.value})

Refer that function in onChange

onChange={this.handleChange}

CodePudding user response：

You should use async onSubmit (event) { and not onSubmit = async event => {.

The former declares a method while the latter initializes a class property with an arrow function. Arrow functions don't have their own this (and no, binding won't change that) so the surrounding scope's this will be used, which will be the global scope (the class block isn't a scope per se as it cannot contain code), and the global scope's this is undefined, and therefore, your code currently crashes on accessing this.setState.

CodePudding user response：

remove this.onSubmit = this.onSubmit.bind(this); from the constructor if you want to use class properties. for more information, see How to use arrow functions (public class fields) as class methods?