reactjs - React router v4 history.push 到功能组件中的相同路由(不同的查询参数)(使用 Hooks API)

Question

我正在尝试为表编写搜索过滤器功能。我正在使用 react-router-dom v4。当用户单击搜索按钮时，我想通过 props.history.push() 将页面从“/list”导航到“list?search=abc”。 (我已经使用了 RouteComponentProps 和 withRouter)。但我知道 react-router-dom v4 只是更改 url 而不会刷新页面。我的同事在类组件中使用函数 componentWillReceiveProps 来检测查询参数的变化。 (现在该函数称为 getDerivedStateFromProps)

componentWillReceiveProps(nextProps) {
   console.log("next Props");
   if (nextProps.location.search !== this.props.location.search) {
     let parsed = queryString.parse(nextProps.location.
     this.loadData(parsed);
   }

在功能组件中使用 React Hook(使用 Typescript)对我来说是强制性的。我尝试了很多方法，但没有用。你知道解决这个问题的方法吗？非常感谢。

Answer 1

我找到了我的解决方案，我使用 useEffect 来检测查询参数搜索更改

useEffect(() => { 
  console.log(`use effect set state search`);
  const searchParams = new URLSearchParams(props.location.search); console.log(search params: ${searchParams}); 
  const search = searchParams.get("search") || "";
  console.log(search: ${search}); setState({ ...state, search: search }); 
  loadData(search); 
}, [props.location.search]);