路由更改时对获取数据做出反应

Posted 2023-02-22

【中文标题】路由更改时对获取数据做出反应

【英文标题】：react fetching data when route change

【发布时间】：2017-12-05 08:19:50

【问题描述】：

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

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

componentDidMount() this.props.fetchSubmitInitialData();

但在 render() 函数中我无法访问新的 Redux 属性。

【问题讨论】：

因为 fetch 是一个异步操作，在响应完成并更新您的 redux 状态之前，您的组件将在没有数据的情况下呈现，一个可能的解决方案是放置一个微调器，直到响应完成然后呈现你想展示的内容

谢谢。但是我如何识别在渲染功能中已收到数据？ @JoseAPL

您必须将响应保存在 redux 存储中，比如说submitInitialData，然后在页面组件中获取该存储。所以第一次它将是一个空对象，但是一旦响应完成，您必须触发successAction，并在reducer中将给定的响应设置为submitInitialData

非常感谢！ @JoseAPL

【参考方案1】：

我如何识别渲染函数中接收到的数据

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

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

假设你的初始状态是这样的

state:
  loading: true
  loaded: false
  data: null

所以在组件渲染的这个阶段，state.loading 是true，所以你可能会显示一个 Loading... 消息例如

当组件被挂载时，你会获取数据，因此会发生调用并返回数据，并且状态会更新为例如

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

现在您的渲染函数看到state.loaded 是true，因此它可以继续渲染state.data 中数据的视图