路线更改时反应获取数据

Question

我有一些路由，我想在每条路由发生变化时在客户端获取数据。

我在componentDidMount中调用fetch函数如下：

componentDidMount() { this.props.fetchSubmitInitialData(); }

但是在 render() 函数中我无法访问新的 Redux 道具。

Answer 1

how I recognize the data has been received in render function

从某种意义上说，您没有意识到数据已被接收，您的呈现函数只是呈现任何状态的视图。只是状态（或从 redux 状态存储传递的 props）在接收到数据时发生变化。因此，下次调用 render() 时，它会针对更新后的值运行，并为您提供当前状态的更新视图。

这是一个按时间顺序排列的例子：

假设您的初始状态如下所示

state:
  loading: true
  loaded: false
  data: null

所以在组件呈现的这个阶段，state.loading 是 true，因此您可能会显示一个正在加载...消息，例如

安装组件时，您获取数据，因此发生调用并返回数据，状态更新为例如

state:
   loading: false
   loaded: true
   data: {'hello': 'world'}

现在您的渲染函数发现 state.loaded 是 true，因此它可以继续为 state.data

中的数据渲染视图

react fetching data when route change