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

Question

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

1-<BasketItem /> (该组件将复制用户添加到购物车中的项目，并具有允许用户修改项目数量的功能)。

2- <OrderSummary /> (此组件将向用户显示其手推车的总价格和运费)。

当然，所有项目的数据和总数都将从数据库中获得(我正在使用防火墙)，但问题是，当用户从<BasketItem />组件更新项目数量时，来自<OrderSummary />的总价格也没有得到更新，因为数据库调用已经完成，无法回忆从数据库获取数据的函数，因为两个组件之间没有父-子关系，而且我无法在它们之间传递props，为此我尝试使用relation context-api。没有解决这个问题，因为最新的数据库和更新总价值的唯一方法是刷新页面，这不是一个很好的用户体验。

Answer 1

通常最好的做法是将状态也以上下文-api或redux存储的形式存储在前端，或者简单地作为组件的状态存储，当用户触发submit/order操作时，他们尝试将前端的状态与DB同步。

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