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

Question

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

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

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

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

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

Error: Maximum update depth exceeded. 

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

Answer 1

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

если 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;
}