未处理拒绝（TypeError）：无法读取未定义的属性“Set State”

Question

我知道在这个问题上有很多答案，比如这个。我确实在组件构造函数中添加了.bind(this)。我还尝试了胖箭头方法(fakeapicall=()=>{...})，但是当我单击Change Me时，仍然会显示此错误：

import React, { Component } from 'react';
import axios from 'axios';
class App extends Component {

  constructor(props){
    super(props);
    this.state = {
      count : 1000
    };
    this.fakeApiCall = this.fakeApiCall.bind(this);

  }

  fakeApiCall (){
    axios.get('https://jsonplaceholder.typicode.com/users')
    .then(function(response){
    // the response comes back here successfully
      const newCount = response.data.length;
    // fail at this step
      this.setState({ count : Math.floor(newCount) });
    });
  }

  render() {
    return (
      <div className="App">
        <span style={{ fontSize : 66 }}>{this.state.count}</span>
        <input type='button' onClick={this.fakeApiCall} value='Change me' />
      </div>
    );
  }
}

export default App;

Answer 1

您的fakeapicall函数绑定到上下文，但Axios中的函数回调不绑定到上下文。

要解决这个问题，可以使用箭头函数，因为它们会自动与类绑定。您还可以为fakeapicall执行此操作，并删除其绑定：

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 1000
        };
    }

    fakeApiCall = () => {
        axios.get('https://jsonplaceholder.typicode.com/users')
            .then(response => { //This is an arrow function
                const newCount = response.data.length;
                this.setState({ count: Math.floor(newCount) });
            });
    }

    render() {
        return (
            <div className="App">
                <span style={{ fontSize: 66 }}>{this.state.count}</span>
                <input type='button' onClick={this.fakeApiCall} value='Change me' />
            </div>
        );
    }
}