反应：不能在承诺中设置状态

Question

I am very confused about this. I am trying to set the isAuthenticated state to true after verifying a JWT, and it won't work. The console logs are outputting weird things (screenshot below).

I suspect I am messing something up with the fetch promise, but I don't know what.

class App extends React.Component {
    constructor(){
        super()
        this.state = {
            isAuthenticated: false
        }
    }

    componentWillMount(){
        this.authenticate()
    }

    authenticate(){
        fetch("http://localhost:3000/authenticated", {
            method: "POST",
            headers: {
                "Accept": "application/json",
                "Content-type": "application/json"
            },
            body: JSON.stringify({
                token: localStorage.getItem("token")
            })
        })
        .then(res => res.json())
        .then(data => {
            console.log(data);        // Server returns true
            console.log(this.state);  // isAuthenticated: false
            console.log(this);        // isAuthenticated: true
            if(data.success){
                this.setState({
                    isAuthenticated: true
                }, console.log(this.state))   // isAuthenticated: false
            }
        })
        .catch(err => {
            console.log(err);
        });
    }

The console logs:

Answer 1

React doesn't bind automatically this to class methods.

You have two ways to handle this.

on constructor

  constructor(){
        super()
        this.state = {
            isAuthenticated: false
        }
        this.authenticate = this.authenticate.bind(this)
    }

or a bit cleaner ES6 way and use arrow functions

authenticate = () => {
  [your code]
  this.setState({ isAuthenticated: true }) // example
}