当另一个组件的状态发生变化时如何重新加载组件 React

Posted 2023-02-23

【中文标题】当另一个组件的状态发生变化时如何重新加载组件 React

【英文标题】：How to reload the component when the state of another component changes React

【发布时间】：2021-06-25 18:43:59

【问题描述】：

我正在制作一个带有 react 和 firebase 的电子商务应用程序，<cart /> 组件包含两个子组件

1-<BasketItem /> （此组件将复制用户添加到购物车中的尽可能多的商品，并且它具有让用户修改商品数量的功能）

2- <OrderSummary /> （此组件将向用户显示其购物车的总价和运费）

当然，项目的所有数据和总数将从数据库中获取（我使用的是 firestore），但问题是当用户从 <BasketItem /> 组件更新项目的数量时，总价格从<OrderSummary /> 也没有得到更新，因为数据库调用已经完成并且无法调用从数据库获取数据的函数，因为两者之间没有 父子 关系组件，我无法在它们之间传递props 我曾尝试为此使用 react-context-api 但这并没有解决问题，因为最新版本在数据库中，并且更新总值的唯一方法是刷新页面，这不是一个好的用户体验。

【问题讨论】：

我在下面写了此类更新如何工作的一般流程。如果您在为您的用例工作时遇到困难，如果您显示minimal code that reproduces where you got stuck，我们更有可能提供帮助（请阅读链接，因为它包含许多关于如何最大化有人可以提供帮助的机会）。

我已经为这个新问题添加了代码：***.com/questions/66895710/…@Frank van Puffelen

我已经接受了答案谢谢@Frank van Puffelen

【参考方案1】：

通常最好的做法是将状态也以 context-api 或 redux-store 的形式存储在前端，或者简单地作为组件的状态，当用户使用时，他们会尝试在前端与 DB 同步此状态触发提交/订购操作。

如果您必须在每次数量变化时更新您的数据库，那么您也必须在前端状态/redux-store 上更新相同的数据库。

【参考方案2】：

在任何 React all 中，当您更新状态中的购物车信息时，所有受影响的 UI 组件都应该更新（因为它们都应该观察到这一点）。

使用 Firestore 时，您将使用所谓的 CQRS 模式，其中发送到数据库的更新是独立于侦听器到数据库的流.您通常会在创建/挂载组件时添加侦听器，以便它们始终在组件对用户可见时进行侦听。

设置到位后，更新流程变为：

您的代码通过 Firebase SDK 将新值写入数据库。 这会在某个时候写入服务器上的数据库。 服务器将此信息发送给所有其他客户端，并向写入该值的客户端确认。 这会触发您之前注册的监听器。 监听器更新应用状态下的数据。 然后最终触发受影响组件的重绘。

这是一般流程，但它适用于我能想到的所有情况。

【讨论】：

你说得对，firestore 不是实时数据库，因此数据库上的更新不会影响应用程序，除非应用程序已重新加载@Frank van Puffelen

实时数据库和 Firestore 都可以以实时方式或“一次读取”方式使用，两者的行为都是相同的。由于您没有在问题中指定您使用的是哪一个，因此我故意写下我的答案以适用于这两种情况。正如我在对您的问题的评论中所说：如果您很难为您的用例完成这项工作，如果您显示 minimal code that reproduces where you got stuck，我们更有可能提供帮助。