reactjs 点击获取数据的时候 改变 state error

Question

reactjs 在点击分页的时候，改变 state 报错

TypeError: _this2.setState is not a function(…)

下面是 代码

GetApiData(index){
    
      let pageid = index;
      let gitusername = this.state.gitusername;
      let gitreponame = this.state.gitreponame;
     
      let endApiUrl = '/api/getissues?gitusername='+ gitusername +'&gitreponame='+ gitreponame +'&pageid='+pageid;

        fetch(endApiUrl)
            .then((response) => {
                return response.json();
            })
            .then((obj) => {
                // 只要有以下这句话就会报错 走 `catch`
                this.setState({
                    data: obj
                });           

            })
            .catch((ex) => {
                console.log(ex);
            });
        
    }

    onChange(index){
        this.setState = {        
            pageid:index,
        }       
        this.GetApiData(index);
    }

Answer 1

var _this = this;
fetch(endApiUrl)
            .then((response) => {
                return response.json();
            })
            .then((obj) => {
                // 只要有以下这句话就会报错 走 `catch`
                _this.setState({
                    data: obj
                });           

            })
            .catch((ex) => {
                console.log(ex);
            });

ajax请求的回调中的this并不指向react组件对象，所以找不到setState方法。

Answer 2

GetApiData(index){
    
      let pageid = index;
      let gitusername = this.state.gitusername;
      let gitreponame = this.state.gitreponame;
     
      let endApiUrl = '/api/getissues?gitusername='+ gitusername +'&gitreponame='+ gitreponame +'&pageid='+pageid;

        fetch(endApiUrl)
            .then(response => response.json())
            .then(obj => 
                this.setState({
                    data: obj
                });           
            )
            .catch(ex => 
                console.log(ex);
            );
    }

    onChange(index){
        this.setState = {        
            pageid:index,
        }       
        this.GetApiData(index);
    }

Answer 3

我将楼主你的代码复制下来，我会在改动的地方用注释标注出来。

原因上面的 @cxxsn 已经提出来了，这个时候的 this 的指向不是你写的这个 component，他的办法是使用 var _this = this;，还有一种是我采用的方法，那就是给回调函数 .bind(this)。这样的用法我记得好像是在官方文档里还是 materia-ui 中看到的示例代码。

GetApiData(index){
    
      let pageid = index;
      let gitusername = this.state.gitusername;
      let gitreponame = this.state.gitreponame;
     
      let endApiUrl = '/api/getissues?gitusername='+ gitusername +'&gitreponame='+ gitreponame +'&pageid='+pageid;

        fetch(endApiUrl)
            .then((response) => {
                return response.json();
            })
            .then(function(obj){
                // 将你的方法改成如下所示
                this.setState({
                    data: obj
                }.bind(this));
            })
            .catch((ex) => {
                console.log(ex);
            });
        
    }

    onChange(index){
        this.setState = {        
            pageid:index,
        }       
        this.GetApiData(index);
    }

Answer 4

我比较常用的方法是这个`GetApiData(index){

  let pageid = index;
  let gitusername = this.state.gitusername;
  let gitreponame = this.state.gitreponame;
  const self = this
 
  let endApiUrl = '/api/getissues?gitusername='+ gitusername +'&gitreponame='+ gitreponame +'&pageid='+pageid;

    fetch(endApiUrl)
        .then((response) => {
            return response.json();
        })
        .then(function(obj){
            // 将你的方法改成如下所示
            self.setState({
                data: obj
            });
        })
        .catch((ex) => {
            console.log(ex);
        });
    
}

onChange(index){
    this.setState = ({       
        pageid:index,
           })
    this.GetApiData(index);
}`