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!
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.