Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

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

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='youremail@email.com' 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!

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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/

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda