在 react-router 中切换同一级别的路由时获取数据的正确方法？

Posted 2023-02-21

【中文标题】在 react-router 中切换同一级别的路由时获取数据的正确方法？

【英文标题】：Correct way to fetch data when switching route on same level in react-router?

【发布时间】：2016-10-04 07:16:53

【问题描述】：

在同一级别切换路由时获取数据的正确方法是什么？ 因为，根据this，同层切换路由会 只打电话给componentWillReceiveProps 和componentDidUpdate。 而componentDidMount只在第一次进入路由时调用。

使用这样的路由配置：

render((
  <Provider store=store>
    <Router>
      <Route path="/" component=App>
        <Route path="/:userId" component=Profile/>
      </Route>
    </Router>
  </Provider>
), document.getElementById('root'));

Profile 组件是：

class Profile extends React.Component 
  componentDidMount() 
    // initial data
    this.fetchUserData();
  
  componentWillReceiveProps(nextProps) 
    if (this.props.params.userId !== nextProps.params.userId) 
      this.fetchUserData();
    
  
  shouldComponentUpdate(nextProps) 
    return this.props.params.userId !== nextProps.params.userId;
  
  render() 
    return (
      <div className="profile"></div>
    );
  

数据将存储在应用程序状态字段 (props.userData)。但， 这显然会扰乱渲染周期，因为路线是 在获取数据完成之前切换。

但是，如果我改成这样：

// deepEqual is function to check object equality recursively
componentWillReceiveProps(nextProps) 
  if (!deepEqual(this.props.userData, nextProps.userData)) 
    this.fetchUserData();
  

shouldComponentUpdate(nextProps) 
  return !deepEqual(this.props.userData, nextProps.userData);

这不起作用，因为在获取 userData 之前，那些道具是 非常平等。

那么，同级路由切换时如何获取数据？

【问题讨论】：

Component does not remount when route parameters change的可能重复

叹息......差不多三年后，这个问题被标记为重复。

【参考方案1】：

来自React Router docs：

componentDidMount () 
  // fetch data initially in scenario 2 from above
  this.fetchInvoice()
,

componentDidUpdate (prevProps) 
  // respond to parameter change in scenario 3
  let oldId = prevProps.params.invoiceId
  let newId = this.props.params.invoiceId
  if (newId !== oldId)
    this.fetchInvoice()
, 

当路由更改时this.props.params.userId 将更新，它被componentDidUpdate 捕获，并触发一次获取。当然，此获取可能会更新状态或 props 触发另一个重新渲染以显示获取的数据。