Question

我正在尝试从示例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;

Answer 1

这是因为this是回调范围内的不同对象。这就是为什么它抱怨setState()不存在 - 它是错误的对象。

最简单的解决方案是所谓的箭头功能。这解决您的问题的原因是因为与传统函数不同，箭头函数不绑定this对象。因此，回调中的this对象是＆＃34;正确的＆＃34;一，你可以拨打setState()。

这是MDN文档在arrow functions上所说的内容：

箭头函数表达式的语法短于函数表达式，并且不绑定自己的this，arguments，super或{{1 }}。这些函数表达式最适合非方法函数，不能用作构造函数。

和

箭头函数不会创建自己的new.target上下文，因此this在封闭的上下文中具有其原始含义。

所以你的功能将成为：

this

getUsers(){ axios.get('http://jsonplaceholder.typicode.com/users') .then((response) => { this.setState({ users: response.data }); }) .catch((error) => { console.log(error); }); }不需要更改，因为您只是登录到控制台并且没有使用catch对象 - 但我仍然为了保持一致而更改了它。

读取未定义的属性“setState”

1 个答案: