Javascript 读取属性'；设置状态'；未定义的

我正在尝试从示例api获取数据，但不断出现错误：

Cannot read property 'setState' of undefined.

有人能告诉我为什么会出现未定义的错误吗？我需要绑定到这个吗

import React, { Component } from 'react';
import axios from 'axios';
import logo from './logo.svg';
import './App.css';
import '../node_modules/bootstrap/dist/css/bootstrap.css';
import '../node_modules/bootstrap/dist/css/bootstrap-theme.css';

import Users from './components/Users.js';

class App extends Component {

constructor(props) {
    super(props);
    this.state = {users: []};
}


getUsers(){ 
     axios.get('http://jsonplaceholder.typicode.com/users')
.then(function (response) {
     this.setState({ users: response.data });
})
.catch(function (error) {
  console.log(error);
  });
}

componentDidMount(){
     this.getUsers();
}

render() {
return (
  <div className="App">
    <div className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <h2>Welcome to React</h2>
    </div>

      <Users data={this.state.users} />

  </div>
);
   }
  }

export default App;

import React，{Component}来自'React'；
从“axios”导入axios；
从“/logo.svg”导入徽标；
导入“/App.css”；
导入“../node_modules/bootstrap/dist/css/bootstrap.css”；
导入“../node_modules/bootstrap/dist/css/bootstrap theme.css”；
从“./components/Users.js”导入用户；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={users:[]}；
}
getUsers（）{
axios.get（）http://jsonplaceholder.typicode.com/users')
.然后（功能（响应）{
this.setState（{users:response.data}）；
})
.catch（函数（错误）{
console.log（错误）；
});
}
componentDidMount（）{
这是getUsers（）；
}
render（）{
返回(
欢迎反应
);
}
}
导出默认应用程序；

发生这种情况是因为

此

是回调范围内的另一个对象。这就是为什么它抱怨

setState（）

不存在-它是错误的对象

最简单的解决方案是所谓的箭头函数。这解决了您的问题的原因是，与传统函数不同，箭头函数不绑定

this

对象。因此，回调中的

这个

对象是“正确”的对象，您可以调用

setState（）

以下是MDN文档中的说明：

箭头函数表达式的语法比函数表达式短，并且不绑定自己的

this

、

参数

、

super

或

new.target

。这些函数表达式最适合于非方法函数，并且不能用作构造函数

及

箭头函数不会创建自己的

此

上下文，因此

此

具有封闭上下文的原始含义

因此，您的功能将变成：

getUsers(){ 
  axios.get('http://jsonplaceholder.typicode.com/users')
  .then((response) => {
     this.setState({ users: response.data });
  })
  .catch((error) => {
    console.log(error);
  });
}

catch

不需要更改，因为您只登录到控制台，不使用

this

对象-但为了一致性，我还是更改了它