React componentDidMount() 在未安装的组件上被触发

Question

从 componentDidMount 上的数据存储调用承诺的简单 React 组件抛出警告：

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the LocationNameView component.

我调试了几次console.log看看this.isMounted()是不是true/false，里面componentDidMountthis.isMounted()会return假第一次然后再一次，这将是真实的。我不确定文档是否清楚，或者 componentDidMount 的名称是否歪曲了我的推理，但似乎只有在实际安装组件时才应调用此方法。

enter link description here

componentDidMount: function() {

  var self = this;
  // make the request to the backend and replace the loading location text
  Models.Location.find(this.props.location)
    .then(function(location) {

        console.log(self.isMounted()); // <--- shows false then true 

        self.setState({ location : location });

    });

},

Answer 1

componentDidMount 在构建基础 DOM 表示时调用，但尚未安装到实际的 DOM.

显示有关在未安装组件上设置状态的警告的原因是因为上例中的 aSync 回调可以 return 在组件实际安装到 DOM 树之前client/browser.

这里的教训是，如果您使用 aSync 回调在 componentWillMount 或 componentDidMount 上设置组件中的状态，请先使用安全锁 isMounted()，然后再继续设置状态，即：

componentDidMount() {

  let self = this;

  PromiseMethod().then(function aSyncCallback(data) {

    if ( self.isMounted() ) {

      self.setState({...data});

    }

  });

}

React componentDidMount() 在未安装的组件上被触发

React componentDidMount() is fired on unMounted component

setstate

reactjs