reactjs - React：如何处理单页应用程序中的组件/状态？

Question

我开发了一个使用 React 的 Sharepoint Online 表单。Sharepoint Online 使用类似导航的单页，这意味着没有真正的页面重新加载/刷新。

该表单通过 http 请求加载数据。但该州显示包含旧数据。只有在硬刷新/缓存清除后，状态才包含正确的数据。

我的问题是，由于导航，我的反应状态没有得到正确更新。我正在异步获取数据：

  public componentDidMount(): void {
    this._renderListAsync();
  }

_renderListAsync()发出 http 请求并设置状态：

._renderListAsync()
   .get("xxx.xxx.xxx") // HTTP request
   .then((response) => {
        this.setState({item:response});
  }

目的是在用户每次访问该站点时加载数据。

当我清除缓存并重新加载时，我的状态会更新为正确的状态。

但是当用户在不同站点之间来回导航时，React 只是添加了更多组件：

这是故意的吗？

如何确保正确更新状态并卸载旧组件？

标签： reactjssharepoint-onlinespfx