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

318
Vistas
La aplicación NextJS, atascada, no puede leer la propiedad de indefinido (leyendo setState) dentro de un método

He vinculado el método a this dentro del constructor. También he usado el truco de la función de flecha para intentar que esto funcione correctamente. Sin embargo, sigo recibiendo este 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 }),

Mi código para este componente está a continuación:

 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> ) } }

Sé que alguien se ha topado con esto antes, si alguien tiene alguna pregunta o respuesta, ¡hágamelo saber!

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

0

Creo que su problema puede radicar en el uso de async en este contexto como lo hace en la línea 12. Creo que debería llamarse como async submitSubscriber (args) {code} en lugar de la forma en que lo ha hecho.

Fuente: 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