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存储。

我认为无法中止先前的componentDidMount执行，以防止设置来自先前调用的旧数据。因此，我的问题是，要防止设置旧数据的最佳方法是什么？

我已经解决了它具有的功能，该功能可以处理fetchData对象的所有这些调用（例如AbortController），但是我发现它有点冗长，所以您知道吗在这种情况下，建议采取什么方法？

Answer 1

使用np.where(condition, value if true, value if false)或支持可取消请求的AbortController之类的库是一个很好的解决方案，但是当组件卸载并保留时，您还可以保留一个实例变量，将其更改为axios。请求完成后，请在使用false之前先检查他。

示例

setState

中止先前运行的异步组件

1 个答案: