我试图设置我的状态，但它返回 "Can't call setState on a component that is yet mounted. "错误。

Question

class Dashboard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      frontURL: null,
      backURL: null,
    };
  }

viewApplicant = (e) => {
    var driverID = e.target.parentElement.parentElement.id;

    firebase.storage()
      .ref("license/" + driverID)
      .child("front")
      .getDownloadURL()
      .then(frontURL => {
        this.setState({
          frontURL
        });
      }).catch(() => {
        alert('Front image could not be loaded')
      });


    firebase.storage()
      .ref("license/" + driverID)
      .child("back")
      .getDownloadURL()
      .then(backURL => {
        this.setState({
          backURL
        });
      }).catch(() => {
        alert('Back image could not be loaded')
      });
  }
}

我试图从Firebase存储中获取我的图片，我能够获取图片的URL，但是当我试图将我的状态设置为URL的状态时，控制台中返回的警告信息总是说我的组件没有被挂载，我不明白，因为根据我的理解，一个组件必须被挂载才能渲染。

我是React的新手，如果能解释为什么会发生这种情况，我将非常感激。

我已经对照以前的帖子检查过了。

• 我没有 react-hot-loader 安装
• 我已经在构造函数中初始化了我的状态。
• 我已经检查了我的组件是通过 componentDidMount

Answer 1

我认为你应该使用一个变量_isMounted来检查你的组件何时被挂载。阅读更多的内容。https:/www.robinwieruch.dereact-warning-cant-call-setstate-on-an-unmounted-component

class Dashboard extends React.Component {
  _isMounted = false;
  constructor(props) {
    super(props);
    this.state = {
      frontURL: null,
      backURL: null,
    };
  }

  componentDidMount() {
    this._isMounted = true;

    firebase.storage()
      .ref("license/" + driverID)
      .child("front")
      .getDownloadURL()
      .then(frontURL => {
        if (_isMounted) {
          this.setState({
          frontURL
        });
        }
      }).catch(() => {
        alert('Front image could not be loaded')
      });
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  ....
}