Изменение в дополнительном параметре не перезагружает компонент

Question

Ниже маршрут:

<Route exact  path="/products/version/:id/:version" component={component} />

Я пытаюсь перенаправить с: http://localhost:8080/products/version/600178221/3 в http://localhost:8080/products/version/600178221/5

с использованием: this.props.history.push ( '/ продукты / версия / 600178221/5');

Проблема: URL обновляется, но компонент не загружается повторно.

Answer 1

React не будет повторно визуализировать ваш компонент, потому что изменился только реквизит, но компонент, который должен быть визуализирован, остается прежним. Реагируйте только на обновления, что необходимо для обновления.

Если вы получаете данные своего продукта из удаленного бэкэнда (используя ajax), я рекомендую вам использовать componentDidUpdate. Это также рекомендуется в официальной документации в качестве альтернативы для getDerivedStateFromProps для побочных эффектов:

Если вам необходимо выполнить побочный эффект (например, выборку данных или анимацию) в ответ на изменение реквизита, используйте вместо этого жизненный цикл componentDidUpdate.

Реакция документации

componendDidUpdate(prevProps) {
    const { match } = this.props;

    if (prevProps.match.params.id !== match.params.id || prevProps.match.params.version !== match.params.version) {
        this.fetchDataFromApi();
    }
}

Answer 2

Наряду с componentDidMount, вам также нужно реализовать componentWillReceiveProps или использовать getDerivedStateFromProps (начиная с v16.3.0 и далее) на странице Products, поскольку этот же компонент повторно отображается с обновленными параметрами и не монтируется при изменении параметров маршрута, это связано с тем, что параметры передаются в качестве реквизитов для компонента и при изменении реквизитов компоненты React перерисовываются и не монтируются заново.

РЕДАКТИРОВАТЬ: начиная с версии 16.3.0 используйте getDerivedStateFromProps для установки / обновления состояния на основе параметров (не нужно указывать его в двух разных методах жизненного цикла)

    ```static getDerivedStateFromProps(nextProps, prevState) {
     if (nextProps.match.params.product !== prevState.currentProductId){
  const currentProductId = nextProps.match.params.product
  const result = productlist.products.filter(obj => {

    return obj.id === currentProductId;

  })
 return {

    product: result[0],
    currentId: currentProductId,
    result

  }
  }
 return null;
 }```