1

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

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

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

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

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

Error: Maximum update depth exceeded.

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

4

2 回答 2

1

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

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

于 2020-06-16T05:54:15.223 回答
0

您可以使用 getDerivedStateFromProps(props, state) 和 componentDidUpdate 生命周期组件。它接受 props 和 state 作为参数。它在调用 render 方法之前被调用，无论是在初始挂载时还是在后续更新时。它应该返回一个对象来更新状态，或者返回 null 来更新任何内容。在此处输入链接描述

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;
}
于 2020-06-16T06:06:56.750 回答