React中路由参数改变页面不刷新数据的情况

路由的参数由于是在componentDidMount中获取的,如果在详情页面再次打开详情页面,由于组件并没有重新渲染,导致didMount不会获取路由参数。
因此在参数改变的时候,可以利用componentWillReceiveProps来更新变量。

// 获取路由参数
  componentDidMount() {
    const didMountId = this.props.location.query.id;
    this.setState({ id: didMountId }, () => {
      this.props.pageList({ id: this.state.id }); // 请求接口获取数据
    });
  }
//组件更新时被调用 
  componentWillReceiveProps(newProps) {
    if (newProps.location.query.id !== this.state.id) {
      this.setState({ id: newProps.location.query.id},  () => {
        this.props.pageList({ id: this.state.id});  //当路由参数改变时,重新请求接口获取数据
      });
    }
  }

ps:如有更好的解决方法,欢迎交流

猜你喜欢

转载自blog.csdn.net/qq_44877496/article/details/107745066
今日推荐