Реагировать на выборку и состояние установки

Question

Я пытаюсь перенаправить страницу входа на страницу участников после того, как она получила аутентификацию от службы отдыха:

это мой компонент Login:

class Login extends Component {

  state = {
    credentials:{
      "username": "", 
      "password": ""
    },
    clientToken: ""
  }

  constructor(props){
    super(props);
    this.handleUsernameChange = this.handleUsernameChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);
    this.handleFormSubmit = this.handleFormSubmit.bind(this);
  }

  handleUsernameChange(event){
    this.state.credentials.username = event.target.value;
  }


  handlePasswordChange(event){
    this.state.credentials.password = event.target.value;
  }

  handleFormSubmit(event){
    event.preventDefault();
    const data = JSON.stringify(this.state.credentials);

    fetch(loginFormurl, {
      method: 'POST',
      headers: {
        "Content-Type": "application/json"
      },
      body: data,
    })
    .then(function(response){
      if(response.ok){
        console.log(response.headers.get('Authorization'));
        this.setState({clientToken: response.headers.get('Authorization')});
      }else{
        console.log(response.statusText);
      }
    })

    .catch(function(error) {
      console.log(error);
    });
  }

  render() {
    if (this.state.clientToken !== "") {
      return <Redirect to='./members' />;
    }

    return (
      <div className="App">
        <h1 className="Login-title">Login to Social Media Aggregator</h1>
        <form className="Login-box" onSubmit={this.handleFormSubmit}>
          <p>
            <label>
              Username
              <input id="username" type="text" name="username" required onChange={this.handleUsernameChange}/>
            </label>
          </p>
          <p>
            <label>
              Password
              <input id="password" type="password" name="password" autoComplete="password" required  onChange={this.handlePasswordChange}/>
            </label>
          </p>
          <p><input type="submit" value="Login"/></p>
        </form>
      </div>
    );
  }
}

export default withRouter(Login);

но когда функция извлечения возвращается и я получаю данные из заголовка Authorization, я не могу вызвать this.setState (), потому что он выдает:

TypeError: Cannot read property 'setState' of undefined
    at index.js:47

Есть предложения о том, как решить эту проблему? Спасибо!

Answer 1

Это потому, что this разрешает анонимную функцию (объект), которую вы создали:

.then(function(response){ // you create a function/Object
  if(response.ok){
    console.log(response.headers.get('Authorization'));
    this.setState({clientToken: response.headers.get('Authorization')}); // `this` is the anonymous function not React component
  }else{
    console.log(response.statusText);
  }
})

По той же причине у вас есть bind функции класса ed в конструкторе.

Если вы можете использовать функцию стрелки, таким образом this будет использовать контекст, в котором используется функция стрелки - который будет вашим компонентом входа в систему:

.then((response) => { // you create a function/Object
  if(response.ok){
    console.log(response.headers.get('Authorization'));
    this.setState({clientToken: response.headers.get('Authorization')}); // `this` is the anonymous function not React component
  }else{
    console.log(response.statusText);
  }
})