javascript - 中止先前运行的异步 componentDidMount

Question

我们有一个连接到 redux 存储的组件，它具有以下 componentDidMount 定义:

async componentDidMount() {
  const page = await fetchPage(this.props.page);
  const section = await fetchSection(this.props.section);

  this.props.saveDataToStore({ page, section });
}

因此，每次安装组件时，它都会运行这段代码。

现在假设我们转到应用程序的另一部分，因此组件被卸载，然后我们在前面的 componentDidMount 完成执行之前返回，再次安装组件并开始获取新数据。每次获取数据时，我们都会将其保存到 redux store。

我认为没有办法中止先前的 componentDidMount 执行以防止设置先前调用的旧数据。所以，我的问题是，防止设置旧数据的最佳方法是什么？

我已经能够通过一个处理 AbortController 对象的函数来解决所有这些调用(如 fetchData)，但我发现它有点冗长，那么您知道在这种情况下建议遵循的方法是什么吗？

Answer 1

使用 AbortController 或像 axios 这样支持可取消请求的库是一个很好的解决方案，但您也可以保留一个实例变量，将其更改为 false 当组件卸载并在请求完成后使用 setState 之前检查它。

示例

class App extends React.Component {
  _isMounted = true;

  async componentDidMount() {
    const page = await fetchPage(this.props.page);
    const section = await fetchSection(this.props.section);

    if (this._isMounted) {
      this.setState({ page, section });
    }
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  render() {
    // ...
  }
}