路由更改后刷新组件

Question

我有一排按钮，所有这些按钮都链接到正在呈现的图表，然后按下按钮，它决定哪些数据将显示在下面的图表上。

 <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() 但没有任何作用。感谢您的帮助！

Answer 1

这是因为您的组件已经渲染并且没有看到任何变化，所以它不会重新渲染。

您必须使用 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 方法已弃用。现在，当您的源数据来自 props params

时，首选静态 getDerivedStateFromProps

Documentation

此方法应该 return 触发重新挂载的新状态，或者 null 表示不刷新。

例子

  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;
  }

Answer 2

componentDidMount 仅在安装（渲染）组件时调用一次。您应该使用 getDerivedStateFromProps 来更新您的组件

路由更改后刷新组件

Refreshing Component after Route Change

reactjs

react-router

mobx