Question

所以我有一个React组件，可以在componentDidMount()上获取数据。该组件路由可以采用查询字符串来确定要加载的资源（即资源的id，/some/where?resource=123。

当我更改查询字符串中的id并在浏览器中按Enter时，组件不会重新装入，而是保持原样。因此，没有加载资源654的数据。

要解决这个问题，我可以将componentDidMount的代码复制并粘贴到componentDidUpdate()中，并在查询字符串发生更改时再次获取数据。

代码示例

  componentDidMount() {
    const { resource } = this.props.location.query;

    if (resource) {
      this.fetchData(); 
      // where fetch data is a function that makes calls
      // to an API and updates the Redux state
    }
  }

  componentDidUpdate(prevProps, prevState) {
    const { resource } = this.props.location.query;

    if (resource && resource !== prevProps.location.query.resource) {
      this.fetchData();
    }
  }

但是有更好的方法来解决这个问题吗？

Answer 1

React路由器从他们的文档中建议了这一点：Component Lifecycle

如果你仔细观察底部有一个数据提取组件的例子。

我个人非常喜欢以这种方式获取数据。它使数据获取与React生命周期保持联系，因此您始终可以确定数据提取何时发生。

React-router：更改查询字符串不会重新装入组件

1 个答案: