3

一个从数据存储中调用 promise 的简单反应组件componentDidMount正在引发警告：

警告：setState(...)：只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了 setState()。这是一个无操作。请检查 LocationNameView 组件的代码。

我扔了一些调试console.log，看看this.isMounted()是真还是假，里面componentDidMount this.isMounted()会第一次返回假，然后又是真的。我不确定文档是否清晰或名称componentDidMount是否扭曲了我的推理，但似乎只有在实际安装组件时才应调用此方法。

在此处输入链接描述

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 });

    });

},
4

1 回答 1

5

componentDidMount在构建底层 DOM 表示但尚未安装到实际 DOM 时调用。

显示有关在未安装组件上设置状态的警告的原因是因为上述示例中的 aSync 回调可以在组件实际安装到客户端/浏览器中的 DOM 树之前返回。

这里的教训是，如果您使用 aSync 回调将组件中的状态设置为 on componentWillMountor ，请在继续设置状态之前componentDidMount先使用安全捕获，即：isMounted()

componentDidMount() {

  let self = this;

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

    if ( self.isMounted() ) {

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

    }

  });

}

React 组件生命周期参考

于 2015-12-31T05:08:12.540 回答