Javascript ReactJS无法获取状态为的数据，错误为；无法读取属性'；州'；“无效”的定义；

我可以在fetch外部访问this.state，但在尝试访问fetch内部的状态时，我遇到以下错误：

未捕获的TypeError:无法读取null的属性“state”

我查阅了StackOverflow的其他文章，但没有找到在fetch调用中使用state属性的有效解决方案。请帮忙

class SignIn extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      email: '',
      password: ''
    }
    this.handleValueChange = this.handleValueChange.bind(this);
  }

  handleValueChange(event) {
    const property = event.target.name;
    this.setState({[property]: event.target.value});
  }

  handleLogin(event){
    event.preventDefault();

    fetch("http://localhost:3001/login.json", {
        method: "POST",
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          email: this.state.email,  //this is where the error occurs
          password: '123456'
        })
    })
    .then(function(res){return res.json();})
    .then(function(data){console.log(data)});
  }

  render() {
    return(
      <header>
        <NavigationBar />

        <div className="form-box">
          <form onSubmit={this.handleLogin}>
            <h2>Login</h2>
            <br />
            <div className="row">
              <div>
                <label>Email</label>
                <input type="text" name="email" ref='emailInputField' 
                  onChange={(event) => this.handleValueChange(event)}
                  required
                />
              </div>
            </div>
            <br />
            <div className="row">
              <div>
                <label>Password</label>
                <input type="text" name="password"
                  onChange={(event) => this.handleValueChange(event)}
                  required
                />
              </div>
            </div>
            <br />
            <div className="btn-submit">
              <input type="submit" value="Let's go!" />
            </div>
          </form>
          <button onClick={() => console.log("this.state", this.state)} >Show state</button>
        </div>
      </header>
    )
  }
}

类签名扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
电子邮件：“”，
密码：“”
}
this.handleValueChange=this.handleValueChange.bind（this）；
}
handleValueChange（事件）{
const property=event.target.name；
this.setState（{[property]：event.target.value}）；
}
handleLogin（事件）{
event.preventDefault（）；
取回（“http://localhost:3001/login.json", {
方法：“张贴”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
},
正文：JSON.stringify({
email:this.state.email，//这是发生错误的地方
密码：“123456”
})
})
.then（函数（res）{return res.json（）；}）
.then（函数（数据）{console.log（数据）}）；
}
render（）{
返回(
登录


电子邮件
this.handleValueChange（事件）}
必修的
/>


密码
this.handleValueChange（事件）}
必修的
/>


console.log（“this.state”，this.state）}>Show state
)
}
}

---

注意：为了简洁起见，有些代码没有显示出来。

您是否尝试过类似的方法：

handleLogin = (event) => {
    event.preventDefault();

    fetch("http://localhost:3001/login.json", {
        method: "POST",
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          email: this.state.email,  //this is where the error occurs
          password: '123456'
        })
    })
    .then((res) => {return res.json();})
    .then((data) => {console.log(data)});
  }

---

或者只是像注释中建议的那样将函数绑定到组件上，就像您对其他函数所做的那样。不过箭头函数要平滑得多。

在构造函数中添加

这个。handleLogin

如下所示

 constructor(props){
    super(props);
    this.state = {
      email: '',
      password: ''
    }
    this.handleValueChange = this.handleValueChange.bind(this);
    this.handleLogin = this.handleLogin.bind(this)
  }

---

我认为下面的方法应该有效

在fetch（…）上方的行中添加

const self=this并呼叫
self.state.email

如果有，请告诉我
 忘记绑定
handleLogin
方法，请将此行放入构造函数：
this.handleLogin=this.handleLogin.bind（this）
您无法访问其中的状态。将该值作为参数、道具等传入。我以前尝试过不带参数的箭头函数，但您的解决方案有效！非常感谢。但这不是正确的方法，因为不需要引入匿名块，所以在构造函数中添加“handleLogin”是绑定当前对象的正确方法。