Question

在同一级别切换路由时获取数据的正确方法是什么？因为，根据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之前，这些道具是非常平等。

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

Answer 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中捕获）并触发提取。当然，这个获取可能会更新状态或道具触发另一个重新渲染以显示所获取的数据。

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

1 个答案: