当我按下后退按钮时，尽管 url 正确，但页面并没有改变

Question

我尝试为 react 中的数据实现分页。如果我单击任何页面，将打开所需的页面并显示数据。例如，如果我按 page 3 ，则会加载第 3 页上的数据。之后，当我按 5 时，将加载第 5 页上的数据。现在，如果我按下后退按钮，URL 会显示 page 3 ，但安装的组件是 page 5。有人可以帮我吗？

这是我安装的组件：

componentDidMount = async () => {

const { state } = this.props.location;
if (state && state.mesg) {
  this.setState({
    mesg: this.props.location.state.mesg,
    mesgType: this.props.location.state.mesgType
  });
  const stateCopy = { ...state };
  delete stateCopy.mesg;
  this.props.history.replace({ state: stateCopy });
}
this.closeMesg(10000);
let pageNo = this.props.location.search.split("=");
await this.fetchCompaniesAPI(pageNo[1] || 1);
this.setState({ isLoading: false });


};

这里我从 url 中提取页码并调用该页面的 API。

谁能帮帮我。

如果您需要更多详细信息，请告知。

我尝试了 window.onpopstate 然后刷新，但没有帮助

我用 componentDidUpdate 试过了，但还是不行

componentDidUpdate= async (prevProps, prevState)=> {
    await this.setState({ isLoading: true });
    let pageNo = this.props.location.search.split("=");
    if (prevState.pageNo !== pageNo[1]) {
    await this.fetchCompaniesAPI(pageNo[1] || 1);
    this.setState({ isLoading: false });
    }
  }

Answer 1

如果您在同一条路线上，则 url 会更改，但不会重新安装组件，因此您的 componentDidMount 代码不会执行。

您必须为此使用 componentDidUpdate。

检查您的页码是否已更改并再次获取。

componentDidUpdate = async(prevProps: Props, prevState: State) => {
    if (prevProps.location !== this.props.location) {
      const pageNo = this.props.location.search.split("=");
      await this.fetchCompaniesAPI(pageNo[1] || 1);
    }
  }

因为当你按下返回时你的道具会改变，而不是你的状态。

Answer 2

您需要在组件更新中复制相同的逻辑，并且您只需要在更改为pageNo时执行该逻辑。

例如：

componentDidUpdate(prevProps, prevState) {
  if (prevState.pageNo !== this.state.pageNo) {
    console.log('page number has changed, do logic here...')
  }
}