Question

我有一个像这样的异步函数：

componentDidMount() {

    someAsyncFunction().then((data) => { 
      this.setState({ something: data });
    });

}

如果回到上一个屏幕，我将收到以下错误：

警告：无法在未安装的组件上调用setState（或forceUpdate）。

如果我在async仍在运行时返回上一个屏幕，我可以做些什么来取消此setState()？

Answer 1

您可以使用此解决方法：

componentDidMount() { 
  this._ismounted = true;
  someAsyncFunction().then((data) => {
    if (this._ismounted) {
      this.setState({ something: data });
    }
  });
}

componentWillUnmount() {
   this._ismounted = false;
}

这样只有在安装组件时才会调用sesState。但是这（如评论中所建议的）是一个反模式，只有在没有其他方法取消asyncFunction而不是等待它被解决然后进行检查时才能使用它。

Answer 2

首先，不应使用isMounted（）将代码包装在if语句中。（https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html）

在您的情况下，我认为您有多种选择：您可以在异步函数中触发一个动作，该动作设置redux状态而不是组件状态。

或者，如果您确实需要它，可以在componentDidMount中设置一个标志，并在componentWillUnmount中将其设置为false。

constructor(props){
    super(props);
    this.state={
        mounted: true
    }
}

componentDidMount() {
    this.setState({mounted: true});
    someAsyncFunction().then((data) => { 
        if(this.state.mounted) this.setState({ something: data });
    });
}


componentWillUnmount() {
    this.setState({mounted: false});
}

无法在卸载的组件上调用setState（异步仍在运行）

2 个答案: