Перерисовать тот же компонент при изменении URL в реакции - PullRequest
Новая
       42

Перерисовать тот же компонент при изменении URL в реакции

0 голосов
/ 10 сентября 2018

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

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

Ответы [ 3 ]

0 голосов
/ 28 ноября 2018

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

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

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() не вызывается при обновлении компонента (см. Ссылку выше). Таким образом, вы не получите новые данные и не обновите свой магазин. Вы должны добавить функцию componentDidUpdate(). Таким образом, вы можете снова вызывать свои функции извлечения при смене реквизита, а не только при первоначальном монтировании компонента. 

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

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

0 голосов
/ 24 января 2019

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

0 голосов
/ 10 сентября 2018

Сделайте что-то вроде следующего: 

static getDerivedStateFromProps(nextProps, prevState) {
  if(nextProps.match.params.id !== prevState.match.params.id) {
    // Here
  }
}
...