当另一个组件的状态发生变化时如何重新加载组件 React
How to reload the component when the state of another component changes React
我正在制作一个带有 React 和 firebase 的电子商务应用 <cart /> 组件包含两个子组件
1-<BasketItem /> （此组件将根据用户添加到购物车的商品数量进行复制，并且它具有让用户修改商品数量的功能项目 )
2- <OrderSummary /> （此组件将向用户显示其购物车的总价和运费）
当然，所有项目数据和总数都将从数据库中获取（我使用的是 firestore），但问题是当用户从 <BasketItem /> 组件更新项目数量时<OrderSummary /> 的总价也没有更新，因为数据库调用已经完成，而且没有办法调用从数据库获取数据的函数，因为没有 父子关系 两个组件之间的关系，我无法在它们之间传递 props 我已经尝试为此使用 react-context-api 但这并没有解决问题，因为最多日期在数据库中，更新总值的唯一方法是刷新页面，这不是一个好的用户体验。
在任何 React all 中，当您更新状态中的购物车信息时，所有受影响的 UI 组件都应该更新（因为它们都应该观察到）。
使用 Firestore 时，您将使用所谓的 CQRS 模式，其中发送 到 数据库的更新是与侦听器分开的流 到数据库。您通常会在 create/mount 组件时添加侦听器，以便它们始终在组件对用户可见时进行侦听。
设置到位后，更新流程变为：
- 您的代码通过 Firebase SDK 将新值写入数据库。
- 这会在某个时候写入服务器上的数据库。
- 服务器将此信息发送给所有其他客户端，并向写入值的客户端发送确认。
- 这会触发您之前注册的侦听器。
- 侦听器更新应用状态中的数据。
- 然后最终触发受影响组件的重绘。
这是一般流程，但它适用于我能想到的所有情况。
通常最好的做法是将状态也以 context-api 或 redux-store 的形式存储在前端，或者简单地作为组件的状态，他们尝试在前端同步这个状态- 当用户触发 submit/order 操作时以 DB 结束。
如果您必须在每次数量变化时更新您的数据库，那么您也必须在前端更新同样的内容 state/redux-store。
我正在制作一个带有 React 和 firebase 的电子商务应用 <cart /> 组件包含两个子组件
1-<BasketItem /> （此组件将根据用户添加到购物车的商品数量进行复制，并且它具有让用户修改商品数量的功能项目 )
2- <OrderSummary /> （此组件将向用户显示其购物车的总价和运费）
当然，所有项目数据和总数都将从数据库中获取（我使用的是 firestore），但问题是当用户从 <BasketItem /> 组件更新项目数量时<OrderSummary /> 的总价也没有更新，因为数据库调用已经完成，而且没有办法调用从数据库获取数据的函数，因为没有 父子关系 两个组件之间的关系，我无法在它们之间传递 props 我已经尝试为此使用 react-context-api 但这并没有解决问题，因为最多日期在数据库中，更新总值的唯一方法是刷新页面，这不是一个好的用户体验。
在任何 React all 中，当您更新状态中的购物车信息时，所有受影响的 UI 组件都应该更新（因为它们都应该观察到）。
使用 Firestore 时，您将使用所谓的 CQRS 模式，其中发送 到 数据库的更新是与侦听器分开的流 到数据库。您通常会在 create/mount 组件时添加侦听器，以便它们始终在组件对用户可见时进行侦听。
设置到位后，更新流程变为：
- 您的代码通过 Firebase SDK 将新值写入数据库。
- 这会在某个时候写入服务器上的数据库。
- 服务器将此信息发送给所有其他客户端，并向写入值的客户端发送确认。
- 这会触发您之前注册的侦听器。
- 侦听器更新应用状态中的数据。
- 然后最终触发受影响组件的重绘。
这是一般流程，但它适用于我能想到的所有情况。
通常最好的做法是将状态也以 context-api 或 redux-store 的形式存储在前端，或者简单地作为组件的状态，他们尝试在前端同步这个状态- 当用户触发 submit/order 操作时以 DB 结束。
如果您必须在每次数量变化时更新您的数据库，那么您也必须在前端更新同样的内容 state/redux-store。