React：无法在promise中设置state

Question

我对此非常困惑。我在验证JWT后尝试将isAuthenticated状态设置为true，但它无法正常工作。控制台日志输出奇怪的东西（截图如下）。

我怀疑我对fetch承诺搞砸了，但我不知道是什么。

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

控制台记录：

Answer 1

React不会自动将this绑定到类方法。

你有两种方法可以解决这个问题。

在构造函数

上

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

或更清洁的ES6方式并使用箭头功能

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