Обновление компонента после изменения маршрута - PullRequest
Новая
       17

Обновление компонента после изменения маршрута

0 голосов
/ 20 февраля 2019

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

 <div>
    <Route path="/" component={Main} />
    <Route path="/chart/:topic" component={Chart} />
 </div>

Элемент кнопки: 

<Link to={"/chart/" + collection.name}>
      <Button key={index} data-key={index} style={this.btnStyle}>
        {this.store.capitalizeFirstLetter(collection.name)}
      </Button>
</Link>

Это прекрасно работает при первом нажатии кнопки.Однако если пользователь пытается изменить данные, нажимая другую кнопку, компонент диаграммы вообще не обновляется, браузер показывает, что URL-адрес изменился, но компонент не обновляется вообще.

Я знаю, что это из-за того, что я поместил console.log в компонент диаграммы, и он не появляется при втором нажатии кнопки.

componentDidMount = () => {
   const { match: { params } } = this.props;
   this.topic = params.topic;
   console.log("chart topic", this.topic);
   this.refreshData(true);
   this.forceUpdate();
   this.store.nytTest(this.topic, this.startDate, this.endDate);
};

Как вы можете видеть, я пытался сделать вызов forceUpdate (), но это ничего не дало.Любая помощь приветствуется!

Ответы [ 2 ]

0 голосов
/ 20 февраля 2019

componentDidMount вызывается только один раз при монтировании (рендеринге) компонента.Вы должны использовать getDerivedStateFromProps для обновления вашего компонента

0 голосов
/ 20 февраля 2019

Это потому, что ваш компонент уже отрендерен и не видит никаких изменений, поэтому он не перерисовывается.

Вы должны использовать метод componentWillReceiveProps, чтобы принудительно обновить ваш компонент

Пример 

componentWillReceiveProps(nextProps){
   if(nextProps.match.params.topic){
      //Changing the state will trigger the rendering
      //Or call your service who's refreshing your data
      this.setState({
        topic:nextProps.match.params.topic
      })
   }
}

РЕДАКТИРОВАТЬ

Метод componentWillReceiveProps устарел .Теперь статический getDerivedStateFromProps предпочтителен, когда исходные данные поступают из параметров реквизита

Документация

Этот метод должен вернуть новое состояние для запуска перемонтированияили ноль для обновления.

Пример 

  static getDerivedStateFromProps(props, state) {
    if (props.match.params.topic && props.match.params.topic !== state.topic) {
      //Resetting the state
      //Clear your old data based on the old topic, update the current topic
      return {
        data: null,
        topic: props.match.params.topic
      };
    }
    return null;
  }
...