Question

我可以在fetch之外访问this.state，但是当尝试访问fetch中的状态时，我收到此错误：

未捕获的TypeError：无法读取null的属性'state'

我查看了StackOverflow上的其他帖子，但没有找到在fetch调用中使用状态属性的有效解决方案。请帮忙。

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

注意：为简洁起见，部分代码未显示

Answer 1

你有没有试过这样的事情：

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

或者只是像在评论中建议的那样将您的功能绑定到您的组件，就像您已经使用其他功能一样。箭头功能虽然更加顺畅。

Answer 2

在构造函数中添加this.handleLogin，如下所示。

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

Answer 3

我认为以下内容应该有效。

在上面的行中，抓取（...）添加const self = this;并致电self.state.email。

如果有，请告诉我。

ReactJS无法获取状态，错误：“无法读取null的属性'状态'”

3 个答案: