Фильтрация содержимого на основе строки запроса с использованием React Js

Question

У нас есть простое приложение для реагирования. Данные поступают из API и хранятся в состоянии. Затем мы используем функцию карты для визуализации данных. И используйте функции сортировки и фильтрации для управления данными.

Теперь мы пытаемся связать информацию фильтра с URL-адресом с помощью строки запроса. Таким образом, при совместном использовании URL-адреса страницы вместе с ним передаются данные фильтра.

Мы обновляем строку запроса, используя тег ссылки библиотеки 'react-router-dom'

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

Теперь, как прослушать изменение строки запроса? componentDidMount запускается только один раз при монтировании компонента. Но когда строка запроса изменяется с помощью тега Link, componentDidMount не запускается. И если мы слушаем функцию рендеринга, она выдает эту ошибку.

Error: Maximum update depth exceeded. 

Каков правильный способ прослушивания / обнаружения изменения строки запроса?

Answer 1

причина, по которой вы получаете эту ошибку, заключается в том, что вы слушаете функцию рендеринга. React монтирует, отображает, слушает строку запроса, повторно выполняет рендеринг, повторно монтирует, повторно прослушивает и т. Д. c. пока вы не превысите максимальную глубину обновления

, если componentDidMount не работает, подумайте об использовании componentDidUpdate , это будет обновляться каждый раз, когда компонент обновляет

Answer 2

Вы можете использовать компоненты жизненного цикла getDerivedStateFromProps (свойства, состояние) и componentDidUpdate. Он принимает реквизиты и состояние в качестве параметров. Он вызывается прямо перед вызовом метода рендеринга как при первоначальном монтировании, так и при последующих обновлениях. Он должен возвращать объект для обновления состояния или 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;
}