Question

我正在尝试为表格编码搜索过滤器功能。我正在使用react-router-dom v4。当用户单击搜索按钮时，我想通过props.history.push（）将页面从“ / list”导航到“ list？search = abc”。（我已经使用过RouteComponentProps和withRouter）。但是我知道react-router-dom v4只是更改url而不会刷新页面。我的同事在类component中使用函数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]);

将路由器v4 history.push到功能组件中的相同路由（不同查询参数）（使用Hooks API）

1 个答案: