渲染

Question

我需要连接到组件更新事件，以获取新数据。因此，我写了类似的东西：

...
constructor(props) {
  super(props);
  const values = queryString.parse(this.props.location.search),
    type = values['type'];
  this.props.loadChallengeDetails(type);
}

shouldComponentUpdate() {
  console.log('shouldComponentUpdate');
  /* if (this.props.location.search !== nextProps.location.search) {
    console.log('should reload report');
    const values = queryString.parse(nextProps.location.search),
      type = values['type'];
    this.props.loadChallengeDetails(type);
  } */
  return true;
}

componentDidUpdate(prevProps) {
  console.log('componentDidUpdate');
  if (this.props.location.search !== prevProps.location.search) {
    console.log('should reload report');
    const values = queryString.parse(this.props.location.search),
      type = values['type'];
    this.props.loadChallengeDetails(type);
  }
}

render() {
  console.log('details:', this.props.details);
...

如果可以的话，此页面/视图是“母版”页面的“详细信息”。根据查询中传递的type的值，它会获取一些数据。

在第一次渲染时，它发生的很好。 shouldComponentUpdate或componentDidUpdate生命周期方法均被调用。当我返回时，然后查看另一条记录的详细信息，但是它显示了过时的数据。控制台日志在渲染器内打印details，但不调用shouldComponentUpdate或componentDidUpdate。

我在做什么错？请告知。