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

【问题标题】：Filtering content based on query string using React Js使用 React Js 根据查询字符串过滤内容
【发布时间】：2020-10-05 15:48:30
【问题描述】：

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

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

我们正在使用“react-router-dom”库的链接标签更新查询字符串

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

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

Error: Maximum update depth exceeded.

侦听/检测查询字符串更改的正确方法是什么？

【问题讨论】：

我收到了这个错误。这个错误发生在无限重新渲染发生时
你正在使用钩子或类组件？
现在，使用类组件。但是，如果您知道基于函数的组件的解决方案，那么@VyasArpit 也可以完成这项工作......谢谢

标签： reactjs react-class-based-component

【解决方案1】：

您可以使用 getDerivedStateFromProps(props, state) 和 componentDidUpdate 生命周期组件。它接受 props 和 state 作为参数。它在调用 render 方法之前被调用，无论是在初始挂载时还是在后续更新时。它应该返回一个对象来更新状态，或者返回 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;
}

【讨论】：

【解决方案2】：

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

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

【讨论】：

我也尝试过 componentDidUpdate。实际上，我们需要在查询字符串更改时更新状态。我们得到了这个错误。警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请在 componentWillUnmount 方法中取消所有订阅和异步任务。
@JasmohanSingh 听完查询参数后，您实际上想做什么？
一旦查询字符串发生变化，我们想要过滤或排序存储在状态中的对象数组。基本上我们将在查询字符串更改时操纵状态。
你能制作沙盒吗？我想这会很容易解决
componentDidUpdate 确实有效，但我正在根据查询字符串更改更新状态。并且 componentDidUpdate 在组件的每个渲染上运行。所以我不得不检查查询字符串的变化。首先，我将查询字符串存储在 componentDidMount 上的状态中。然后我将状态值与 componentDidUpdate 中查询字符串的实时值进行了比较。如果值不同，那么我会更新状态值。所以现在我可以更新每个查询字符串更改的状态。感谢您的建议。