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

Question

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

这是我需要进行更改的片段。 dragAndDrop是一个prop item，在A页为真，在B页为假。

<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 还是比较陌生，并且每天都在学习越来越多。我觉得应该在某个地方讨论我的问题。但是我一直找不到它。所以，很抱歉 post 可能是重复的。

Answer 1

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

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

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

How to make database updates and state changes in React show up across all connected pages?

database

synchronization

reactjs