如何设置状态，继续获取TypeError:无法读取未定义的属性“setState”

Question

我正试图用从axios get返回的数据设置状态。但我一直收到以下错误类型错误：无法读取undefined的属性“setState”。

类页扩展反应。组件{

constructor(props) {
    super(props);
    this.authenticated = props.authenticated;
    //this.handleClick = this.handleClick.bind(this);
} 

state ={
    page : []
}

componentDidMount() {
    let config = null;
    //let token = null;
    app.auth().currentUser.getIdToken(true).then(function(idToken) {
        config = {
            headers: {'Authorization': idToken}
        };
        console.log(config);
        axios.get('http://localhost:4001/api/v1/page',config)
        .then(res => {
            console.log(res.data);
          const page = res.data;
          this.setState( page );
        }).catch((err)=>{
            console.log(err);
        });

     })

  }

render () {

    const authenticated = this.authenticated;
    console.log(authenticated);
    console.log(this.state);

    return (
        <h1> test 123</h1>
      );
}

}

Answer 1

axios中的这个表示不同的东西，将this的值存储在变量中并使用该变量

componentDidMount = () => {
  let config = null;
  //let token = null;
  const current = this; // here save this in current variable
  app
    .auth()
    .currentUser.getIdToken(true)
    .then(function(idToken) {
      config = {
        headers: { Authorization: idToken }
      };
      console.log(config);
      axios
        .get('http://localhost:4001/api/v1/page', config)
        .then(res => {
          console.log(res.data);
          const page = res.data;
          current.setState(page); // use current here
        })
        .catch(err => {
          console.log(err);
        });
    });
}