Flux 与多个 ajax 请求

Posted 2023-02-22

【中文标题】Flux 与多个 ajax 请求

【英文标题】：Flux with multiple ajax requests

【发布时间】：2015-06-22 03:00:56

【问题描述】：

我有一个 React 组件，<Profile/>，用于显示当前选择的用户。

在 componentDidMount 和 componentWillUpdate 上，我检查了 Flux 商店中的用户。

如果用户丢失，或者用户存在但其userId 与url 中的userId 不匹配，我将调用Flux 操作getUser(userId)。

问题是，由于componentWillUpdate被多次调用，这个调用可能会被多次触发。

我的临时解决方法是跟踪待处理的 ajax 请求，由 userId 键入，如果一个已经在进行中，我不会发出另一个。

不过，这感觉很老套，我想知道这是否是一个常见问题（以及推荐的解决方案），或者我的架构是否需要改进。

【参考方案1】：

您正在尝试做的是应用程序逻辑而不是视图逻辑。因此，最好将您的逻辑移动到操作/存储（请参阅通量架构以了解有关存储的更多信息）并在您获得响应后发出一个事件，该事件将更新视图组件。

【参考方案2】：

您不应该在componentWillUpdate 中调用 Flux 商店。 componentWillUpdate 用于您在渲染之前需要做的任何准备工作。当 React 调用 componentWillUpdate 时，它已经确定某些东西（props 或 state）已经改变，并且组件应该更新，所以现在不是获取更多数据的时候。

您应该改为调用 componentWillReceiveProps 中的 Flux 存储（假设用户 ID 作为道具传递给组件）。

【讨论】：

有道理，感谢您提供的信息。但是，同样的问题仍然存在。即，componentWillReceiveProps 被调用 > 我请求数据 > 它被再次调用 > 我请求相同的数据 = 无限循环。我认为有一个属性会因 ajax 调用而发生变化（甚至在返回 ajax 之前），触发循环，但我没有看到它。此外，如果您有 2 个不同的组件，它们都需要相同的数据，其中任何一个都能够请求它，那么（理论上）也会存在同样的问题。如果一个组件已经在进行中，它怎么知道不发出相同的请求？

componentWillReceiveProps 不会被调用，除非新的用户 ID 作为 prop 传入。您在做什么导致多个重复请求？

我想我刚刚想通了。我传递了...this.props，而不是为组件显式声明一些属性。我的flux 对象因此被传递下来，所以我认为该对象的更改导致了循环。现在我已经删除它了。谢谢！

没关系，不固定。尽管只传递了所需的属性，但该方法被一次又一次地调用。不知道为什么。记录两个属性（props.user 和 props.creations）不会显示从一个调用到下一个调用的任何变化。 i.imgur.com/n3Jr035.png

@AndersEkdahl 这不是真的； React 无法知道 props 或 state 是否已更改，因为您可能拥有具有引用相等但不具有值相等的对象（感谢 javascript）。除非你使用 shouldComponentUpdate（或者像 PureRenderMixin 这样的 mixin），否则 React 必须假设你会重新渲染。