如何使React中的数据库更新和状态更改显示在所有连接的页面上

Question

我手头有一个任务，我有一个页面a，在那里我可以拖放来重新排列显示为列表的某些组件，还有一个页面B，它只向用户显示列表，而不允许任何顺序更改，这两个页面应该保持当前状态的更新。页面A上的任何更改都应该反映在页面B上，而无需重新加载。我确实将更改存储在MongoDB数据库中，刷新页面B会显示更新的顺序。我知道我可以在不刷新页面的情况下更新页面，只需让页面本身在每x秒后检查数据库的当前状态，但这感觉资源很重。有更好的方法吗？

这是我需要改变的地方。dragAndDrop是一个道具项目，在页面a上为true，但在页面B上为false。

<React.Fragment>
{
dragAndDrop ?
(
<Draggable draggableId={result.id} index={index}>
{(provided, snapshot) => (
<div 
className={snapshot.isDragging ? "result-card dragging" : "result-card"}
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
>
<div className="d-flex align-items-center">
<span className="math-result">= { result.result }</span>
<span className="calculation-title">{ result.title }</span>
<button className="cstm-btn-red" onClick={() => this.openModal()}>See Input</button>
<Modal open={this.state.isOpen} onClose={() => this.closeModal()}>
{ result.inputContent }
</Modal>
</div>
</div>
)}
</Draggable>
) :
(
<div className="result-card">
<div className="d-flex align-items-center">
<span className="math-result">= { result.result }</span>
<span className="calculation-title">{ result.title }</span>
<button className="cstm-btn-red" onClick={() => this.openModal()}>See Input</button>
<Modal open={this.state.isOpen} onClose={() => this.closeModal()}>
{ result.inputContent }
</Modal>
</div>
</div>
)
}
</React.Fragment>

我对React JS还是很新鲜的，每天都在学习越来越多。我觉得应该在某个地方讨论一下我的问题。但是我一直找不到它。所以，很抱歉这篇文章可能是重复的。

Answer 1

存储所有更新的简单方法是使用Redux或Context API或浏览器的本地存储，您必须访问给定的链接才能了解更多信息。基本上，它们存储用户所做的所有更改，而无需重新加载任何页面，并且它将一直持续到用户关闭选项卡

如果你想永久存储它们，我建议在他离开页面A时调用API(你必须跟踪页面URL或使用useEffect返回函数来调用这个API-这些对于初学者来说似乎很难理解，但一旦你理解了useEffect挂钩或react-router挂钩，就很容易做到这一点(并将他的订单存储在DB中，同时也更新冗余状态或上下文API状态或本地存储。通常，我们使用redux，这与上下文或本地存储相比有很多优势。