javascript - ReactJS 浏览器返回按钮刷新同一个组件

Question

我有一个由多个反应组件组成的搜索页面。用户将键入关键字进行搜索并查看结果，所有这些都发生在同一页面上。

用户可以通过单击主页上的搜索按钮来访问此页面，也可以通过输入 URL 直接访问此页面。URL 模式是http://example.com/search?q=text

这是我的页面标记

<Search>组件将更新 redux 状态并发出所需的后端调用以获取有关componentDidMountlide 循环事件的数据。

组件流程：

1. <Search />将读取查询字符串并更新触发两个 API 调用的 redux 状态，一个用于构面，另一个用于结果。
2. <SearchBox />组件将在文本框中显示此文本
3. <Facets />并<Results />根据后端调用更新的 redux 状态显示数据。
4. <CountBar />显示结果的一些汇总信息

初始加载后，用户可以在文本框中键入搜索词，<SearchBox />然后按enter。此按钮单击将更新 redux 状态并发出history.push("/search?q=test"). 这将重复上述过程并更新 URL。到这里为止一切都很好。

经过几次搜索，如果用户按下浏览器后退按钮，<Search />组件不会根据查询字符串更新数据，因为componentDidMount没有触发。不会触发任何子组件事件。我尝试使用componentWillRecieveProps，但这会进入无限循环。

我能想到的一个选择是将查询字符串作为道具传递给子组件（如果这有助于避免这个问题，请不要这样做）但我需要这个查询字符串处于 redux 状态，因为我几乎没有其他需要最后搜索的路由查询字符串值。

所以现在我有几个问题：

1. 在这种情况下处理浏览器后退按钮的最佳方法是什么？
2. 这里组件负责将查询字符串更新为redux，这是一个好的行为吗？
3. 我正在使用 React 16.7 而不是 React Hooks。升级到最新版本或使用 Hooks 是否会有所帮助？

感谢您的帮助。

标签： javascriptreactjsredux

Answer 1

当我最初尝试时，我可能错过了一些东西componentWillReceivePorps。我试过这个，它按预期工作。在这种方法中，我将newprops与现有道具进行比较，以查看它们是否不同并相应地进行 API 调用。对于第一个页面加载componentDidMount将进行 API 调用。

componentWillReceiveProps(newProps: any){

    let keyword = querystring.parse(this.props.location.search).q;
    let newKeyword = querystring.parse(newProps.location.search).q;

    if(keyword != newKeyword){
      //trigger redux action
    }
  }