Повторно отобразить тот же компонент при изменении url-адреса в реакции

У меня есть маршрут, который принимает идентификатор и отображает один и тот же компонент для каждого идентификатора, например: <Route path='/:code' component={Card}/>

Теперь в теге Link я передаю идентификатор компоненту. Теперь компонент Card извлекает дополнительную информацию на основе переданного идентификатора. Но проблема в том, что он отображается только для одного идентификатора и не обновляется, если я нажимаю назад и перехожу к следующему идентификатору. Я поискал и обнаружил, что можно использовать componentsWillReceiveProps, но в последних версиях React он устарел. Итак, как это сделать?

возможный дубликат stackoverflow.com/questions/38915066/…

Andy 03.11.2020 15:51
5
1
13 406
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Я просто столкнулся с похожей проблемой. Я думаю, вы объединяете обновление / перерисовку и перемонтирование. Диаграмма Этот на методах жизненного цикла реакции помогла мне, когда я имел дело с ней.

Если ваша проблема похожа на мою, у вас есть такой компонент, как

class Card extend Component {
  componentDidMount() {
    // call fetch function which probably updates your redux store  
  }

  render () {
    return // JSX or child component with {...this.props} used, 
           // some of which are taken from the store through mapStateToProps
  }
}

В первый раз, когда вы нажимаете URL-адрес, по которому монтируется этот компонент, все работает правильно, а затем, когда вы посещаете другой маршрут, который использует тот же компонент, ничего не меняется. Это потому, что компонент не перемонтируется, он просто обновляется из-за изменения некоторых свойств, по крайней мере, this.props.match.params.

Но componentDidMount() не вызывается при обновлении компонента (см. Ссылку выше). Таким образом, вы не будете получать новые данные и обновлять свое хранилище redux. Вам следует добавить функцию componentDidUpdate(). Таким образом, вы можете снова вызывать свои функции выборки при изменении свойств, а не только тогда, когда компонент изначально смонтирован.

componentDidUpdate(prevProps) {
  if (this.match.params.id !== prevProps.match.params.id) {
    // call the fetch function again
  }
}

Проверьте реакцию документация для более подробной информации.

Ответ принят как подходящий

В React Router v4 добавление тега коммутатора после того, как маршрутизатор устраняет проблему

Что это значит?

JNF 15.02.2021 08:06

На самом деле я придумал другой способ сделать это.

Начнем с вашего примера кода: <Route path='/:code' component={Card}/>

Что вы хотите сделать, так это сделать так, чтобы <Card> был компонентом оболочки, предпочтительно функциональным (на самом деле ему не нужно какое-либо состояние, я не думаю) и визуализировать компонент, который вы хотите визуализировать, передав свои реквизиты с помощью {...props}, чтобы он получает свойства маршрутизатора, но, что важно, дает ему свойство key, которое заставит его повторно визуализировать с нуля

Так, например, у меня есть что-то вроде этого:

<Route exact={false} path="/:customerid/:courierid/:serviceid" component={Prices} />

И я хотел, чтобы мой компонент перерисовывался при изменении URL-адреса, но ТОЛЬКО при изменении customrid или serviceid. Итак, я превратил Prices в такой функциональный компонент:

function Prices (props) {
    const matchParams = props.match.params;
    const k = `${matchParams.customerid}-${matchParams.serviceid}`;
    console.log('render key (functional):');
    console.log(k);
    return (
        <RealPrices {...props} key={k} />
    )
}

Обратите внимание, что мой ключ учитывает только Customerid и serviceid - он будет повторно отображен, когда эти два изменятся, но он не будет повторно отображаться при изменении courierid (просто добавьте это в ключ, если хотите). И мой компонент RealPrices получает то преимущество, что по-прежнему передаются все параметры маршрута, такие как история, местоположение, совпадение и т. д.

Включение текущего местоположения в качестве ключа на компоненте решает проблему.

<Route path='/:code' component={(props) => <Card {...props} key={window.location.pathname}/>}/>

Другие вопросы по теме