NextJS application, stuck on can not read property of undefined (reading setState) within a method-CodePudding

I have bound the method to this within the constructor. I have also used the arrow function trick to try and get this to work properly. However, I keep getting this error:

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'setState')

Source
components\home\cta\cta.js (14:9) @ _callee$

  12 | submitSubscriber = async (e, stateEmail) => {
  13 |   e.preventDefault()
> 14 |   this.setState({loading: true})
     |       ^
  15 |   const res = await fetch('http://localhost:5000/subscribe/add', {
  16 |     method: 'POST',
  17 |     body: JSON.stringify({ email: stateEmail }),

My code for this component is below:

import React, { Component } from 'react';
import ctastyle from '/styles/home/cta.module.css'

export default class CTA extends Component {
  constructor(props) {
    super(props)
    this.state = { email: '', response: '', loading: false }

    this.submitSubscriber = this.submitSubscriber.bind(this)
  }

  submitSubscriber = async (e, stateEmail) => {
    e.preventDefault()
    this.setState({loading: true})
    const res = await fetch('http://localhost:5000/subscribe/add', {
      method: 'POST',
      body: JSON.stringify({ email: stateEmail }),
      headers: {
        'Content-Type': 'application/json'
      }
    })
    const data = await res.json()
    this.setState({loading: false})
    this.setState({email: '', response: data.response[0]})
  }

  renderMessage(mess) {
    if (mess == 200) {
      return (
        <div className={ctastyle.successMessage}>
          <h3>Successfully Signed Up!</h3>
        </div>
      )
    }
    else if (mess == 400) {
      <div className={ctastyle.errorMessage}>
        <h3>Looks like that email has signed up already!</h3>
      </div>
    }
  }

  render() {
    return (
      <div className={ctastyle.ctaHousing}>
        {this.renderMessage(this.state.response)}
        <h2>SUBSCRIBE TO OUR MAILING LIST</h2>
        <h4>Get our newsletters and new content!</h4>
        <form>
          <input placeholder='[email protected]' value={this.state.email} onChange={e => this.setState({ email: e.target.value })} />
          <button onClick={e => this.submitSubscriber(e, this.state.email)}>Sign Up</button>
        </form>
      </div>
    )
  }
}

I know someone has run into this before, if anyone has any questions or answers please let me know!

CodePudding user response：

I think your issue may lie with using async in this context as you do on line 12. I believe It should be called as async submitSubscriber(args) {code} rather than the way you have done it.

Source: https://www.valentinog.com/blog/await-react/