Reactjs 如果（this.isMounted（））未被调用？

你能告诉我为什么我会这样做吗：

 var SomeComponent = React.createClass({

 getData: function(){

 if (this.isMounted()){

  var queryInfo = {
    userId: sessionStorage.getItem("user_id"),
    userRole: sessionStorage.getItem('user_role'),
    aptId : this.props.params
  }

  io = io.connect();
  io.emit('allTasks', queryInfo);
  io.on('allTasksInfo', function(data){
    reqwest({
      url: '/apartment/tasks/address',
      method: 'get',
      xhrFields: {withCredentials: true},
      crossOrigin: true
    }).then(function(data){
       this.setState({
         dataSet: arr
       })
    }.bind(this));
   }.bind(this));
  }
},

componentDidMount: function(){
    this.getData();
},

render: function(){...}

});

var SomeComponent = React.createClass({

getData: function(){

    var queryInfo = {
     userId: sessionStorage.getItem("user_id"),
     userRole: sessionStorage.getItem('user_role'),
     aptId : location.pathname.split("/")[4]
    }

    reqwest({
        url:'/operation/staff',
        method: 'get',
        xhrFields: {withCredentials: true},
        crossOrigin: true
    }).then(function(data){
        if(this.isMounted()){
            this.setState({
                operationStaff: data
            })
        }
    }.bind(this));
 }

 componentDidMount: function(){
   this.getData();
 },

 render: function(){...}

});

if中的代码已执行，但我得到了未捕获的错误：警告：setState（…）：只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了setState（）。这是禁止的

但当我这么做的时候：

 var SomeComponent = React.createClass({

 getData: function(){

 if (this.isMounted()){

  var queryInfo = {
    userId: sessionStorage.getItem("user_id"),
    userRole: sessionStorage.getItem('user_role'),
    aptId : this.props.params
  }

  io = io.connect();
  io.emit('allTasks', queryInfo);
  io.on('allTasksInfo', function(data){
    reqwest({
      url: '/apartment/tasks/address',
      method: 'get',
      xhrFields: {withCredentials: true},
      crossOrigin: true
    }).then(function(data){
       this.setState({
         dataSet: arr
       })
    }.bind(this));
   }.bind(this));
  }
},

componentDidMount: function(){
    this.getData();
},

render: function(){...}

});

var SomeComponent = React.createClass({

getData: function(){

    var queryInfo = {
     userId: sessionStorage.getItem("user_id"),
     userRole: sessionStorage.getItem('user_role'),
     aptId : location.pathname.split("/")[4]
    }

    reqwest({
        url:'/operation/staff',
        method: 'get',
        xhrFields: {withCredentials: true},
        crossOrigin: true
    }).then(function(data){
        if(this.isMounted()){
            this.setState({
                operationStaff: data
            })
        }
    }.bind(this));
 }

 componentDidMount: function(){
   this.getData();
 },

 render: function(){...}

});

一切都好。第一个不应该在安装组件时执行吗？我错过了什么

编辑：我正在使用react router和express server with socket.io进行服务器渲染（只是组件，而不是数据-我将获取客户端）。在回答之后，我可以说：

• 组件未卸载
• 现在我可以看出，在第一次渲染时，即使在第二个示例中，此警告也不会出现：

但是如果我更改url并返回到这个路径（这里是的，组件卸载偏离了轨道），Ajax reqwest将被调用两次

这与套接字实现有关

我将关闭此问题，并就此打开另一个问题。谢谢你的帮助

第一个不应该在安装组件时执行吗

是的，确实如此（你为什么认为不是呢？）

但是，Ajax回调本身将在将来某个时候执行，此时组件可能已经卸载

在第一个示例中，测试是无用的，因为组件总是在调用

componentDidMount

后装入。在第二个示例中，您正在测试是否在调用

setState

之前安装了组件，这更有意义

以下是一个简化的示例：

var Hello = React.createClass({
    getInitialState: function() {
        return {name: 'foo'};
    },

    componentDidMount: function() {
        console.log('mounted...');

        setTimeout(function() {
            // this works fine
            console.log('updating state once...');
            this.setState({
                name: 'bar'
             });
        }.bind(this), 1000);

        setTimeout(function() {
            // this will throw
            console.log('updating state twice...');
            this.setState({
                name: 'baz'
             });
        }.bind(this), 3000);
    },

    componentWillUnmount: function() {
        console.log('unmounting...');
    },

    render: function() {
        return <div>Hello {this.state.name}</div>;
    }
});

React.render(
  <Hello />,
  document.getElementById('container')
);

setTimeout(function() {
    React.unmountComponentAtNode(
        document.getElementById('container')
    );
}, 2000);

---

演示：

我正在使用react router和express server with socket.io进行服务器渲染（只是组件，而不是数据-我将获取客户端）。在回答之后，我可以说：

• 组件未卸载
• 现在我可以看出，在第一次渲染时，即使在第二个示例中，此警告也不会出现：

但是如果我更改url并返回到这个路径（这里是的，组件卸载偏离了轨道），Ajax reqwest将被调用两次

这与套接字实现有关

---

我将关闭此问题，并就此打开另一个问题。谢谢您的帮助。

如果没有完整的示例，我们只能猜测：在收到Ajax响应的那一刻，组件已经卸载，因此对卸载的组件调用

setState

。如果仅从

componentDidMount

调用签入

getData

本身没有多大意义。这个条件将始终为真。我在第二个示例中编辑了这个问题，以包括componentDidMount。这和第一个例子一样，这就是问题的原因。我也这么认为。但这仍然不是一个完整的例子。我无法运行该示例。我不知道是什么让组件装载或卸载。因此只能猜测。如果从未调用

isMounted

，那么您可以从问题中删除整个

If

主体，因为它从未执行过，因此不属于问题的一部分吗？好的，但这是一个真实的数据获取示例。这两个选项都正常工作，但第一个选项出现了一个未捕获的错误。感谢您的回答，但这是一个承诺，不是回调，并且组件仍在装载，我不会更改url（我使用react router），也不会卸载组件。它仍然存在。传递给

的函数仍然是回调函数。考虑到你提供的信息，这是我能想到的唯一解释（猜测）。如果这不适用于你的情况，你必须提供更多的信息。但是，我仍然会在
组件willunmount
中添加一个
控制台。log
以100%确定它不会卸载。是的，您是对的，这是一个回调。console.log证明它没有卸载。我现在的猜测是：有插座的东西。