使用 React Js 根据查询字符串过滤内容

Question

我们有一个简单的 React 应用程序。数据来自 api 并存储在状态中。然后我们使用地图函数来渲染数据。并使用排序和过滤功能来操作数据。

现在，我们尝试使用查询字符串将过滤器信息与 URL 相关联。因此，在共享页面 URL 时，过滤数据也会随之传递。

我们正在使用 'react-router-dom' 库的 link 标签更新查询字符串

<Link to='/pagePath?queryStringKey=queryStringValue'> Link Content </Link>

现在，如何监听查询字符串的变化？ componentDidMount 运行s 仅在安装组件时执行一次。但是当使用 Link 标记更改查询字符串时，componentDidMount 不会运行。如果我们从渲染函数中监听，那么它会给出这个错误。

Error: Maximum update depth exceeded.

listen/detect查询字符串更改的正确方法是什么？

Answer 1

您收到该错误的原因是您正在监听渲染函数。 React 挂载、渲染、侦听查询字符串、再次重新渲染、重新挂载、重新侦听等，直到超过最大更新深度

如果 componentDidMount 不起作用，请考虑使用 componentDidUpdate 这将在每次组件更新时更新

Answer 2

您可以使用 getDerivedStateFromProps(props, state) 和 componentDidUpdate 生命周期组件。它接受道具和状态作为参数。它在调用 render 方法之前被调用，无论是在初始挂载时还是在后续更新时。它应该 return 一个对象来更新状态，或者 null 不更新任何内容。 enter link description here

constructor(){
  super();
  this.state = {
    queryStringKey = ''
  }
}

static getDerivedStateFromProps(props, state){
  let { queryStringKey } = this.props.match.params;
  if(queryStringKey !== state.queryStringKey){
    return {
      queryStringKey: props.queryStringKey
    }
  }

  return null;
}

使用 React Js 根据查询字符串过滤内容

Filtering content based on query string using React Js

reactjs

react-class-based-component