NextJS 应用程序，卡在无法读取属性 of undefined (reading setState) within a method

Question

我已将方法绑定到构造函数中的 this。我还使用了箭头函数技巧来尝试让它正常工作。但是，我不断收到此错误：

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

我的这个组件的代码如下：

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

我知道之前有人运行参与过这个，如果有人有任何问题或答案，请告诉我！

Answer 1

我认为您的问题可能在于像您在第 12 行所做的那样在此上下文中使用异步。我相信它应该被称为异步提交订阅者（args）{代码}，而不是您完成它的方式。

来源：https://www.valentinog.com/blog/await-react/

NextJS 应用程序，卡在无法读取属性 of undefined (reading setState) within a method

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

javascript

jsx

node.js

reactjs

next.js

NextJS 应用程序，卡在无法读取 属性 of undefined (reading setState) within a method

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

javascript

jsx

node.js

reactjs

next.js

NextJS 应用程序，卡在无法读取属性 of undefined (reading setState) within a method