如何保持React状态与MySQL数据库同步

2024-03-16

Scene:我正在构建一个简单的日历 Web 应用程序,它使用 React 作为前端,使用 MySQL 作为服务器后端。该应用程序在首次安装时从服务器检索所有事件的列表,将它们显示给用户并允许进行 CRUD 操作。一切都按预期进行。

Question:在创建、更新或删除操作中,我应该:

  1. “独立”更新数据库和状态。

  2. 更新数据库,再次调用服务器以检索新的事件列表,然后将状态设置为等于此新列表。

  3. 完全做点别的事情。

Impetus:我的印象是我的数据应该有一个“单一的事实来源”,感觉上面的第一个选项造成了一种情况,我有两个“来源”,在某些情况下可能会变得不同步。


1. 和 2. 都是正确的,这实际上取决于您想要实现的目标。您可以尝试使用乐观的更新这意味着,当提交这些操作时,您会更改状态,就好像操作成功一样(大多数情况下应该是这种情况),如果操作由于某种原因在数据库/后端失败,则进行更正。这创造了良好的前端体验。在这些情况下,您还可以在操作后获取新数据。

如果数据库上的数据可能会从多个来源发生更改,那么您需要定期并在更改后最有可能获取它,并相应地更新您的前端。

如果您是唯一操纵数据的人(至少需要在该州拥有这些数据),则情况 1. 应该可行。在这种情况下,后端/数据库仍应响应所执行操作的状态,以帮助您管理状态。您还可以在操作挂起时显示某种加载指示器,而不是乐观地更新状态。

您可以在此处阅读有关乐观更新的更多信息:https://medium.com/guidesmiths-dev/anatomy-of-a-react-application-optimistic-updates-e4a3318665c7 https://medium.com/guidesmiths-dev/anatomy-of-a-react-application-optimistic-updates-e4a3318665c7

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何保持React状态与MySQL数据库同步 的相关文章

  • 使用相同的 props 来反应备忘录重新渲染?

    有一个相当简单的功能组件 如果给出相同的道具 我想阻止它被重新渲染 下面是网上找的 貌似不行 知道我应该做什么吗 就我而言 props 由一组对象组成 其中一些也是嵌套对象 这也许是一个线索 export const DataTable R
  • Material UI 组件中的媒体查询

    我在 React js 项目中使用 Material UI 组件 出于某种原因 我需要对某些组件进行自定义 以使其根据屏幕宽度进行响应 我已经添加了media query并将其作为组件中的样式属性传递 但不起作用 知道吗 我正在使用这样的代
  • 使用python shelve跨平台

    我希望得到关于 Python 中的书架 数据库的一些建议 问题 我在 Mac 上创建了一个数据库 我想在 Windows 7 上使用该数据库 我使用 Python 3 2 MacOS 10 7 和 win 7 当我在 Mac 上打开并保存我
  • 无法使用 datastax java 驱动程序通过 UDT 密钥从 cassandra 检索

    我正在尝试使用用户定义的类型作为分区键将对象存储在 cassandra 中 我正在使用 datastax java 驱动程序进行对象映射 虽然我能够插入到数据库中 但无法检索该对象 如果我更改分区键以使用非 udt 例如文本 我就能够保存和
  • 发布到 npm 时出现问题

    所以我尝试使用 React 构建一个开源项目并将其推送到 npm 问题是 我的组件虽然在测试环境中运行良好 安装到其他组件 但当我将其发布到 npm 并下载包并尝试访问它时 它给了我一个错误 这是代码的一个小示例 import React
  • 向 ReduxReducer 添加回调

    是否有任何错误 反模式 就 React Redux 中的思考 中添加了一个回调action data转化为行动 reducer ACTION FOR REDUCER var x 123 if action data callback act
  • Android 认为我没有关闭数据库!为什么?

    我有一个 SQLiteDatabase 数据成员 我在 onCreate 中初始化它 并在 onPause onStop 和 onDestroy 中调用 close 它在 onResume 中重新初始化 它似乎运行得很好 但当我查看调试器时
  • 创建 html 结构,每个 li 中仅允许 3 个 div 元素。在 React + underscore.js 中

    这是以下内容的位副本如何创建每个 li 中仅允许 3 个 div 元素的 html 结构 在 React underscore js 中 https stackoverflow com questions 38008023 how to c
  • 如何使用 jest 通过 Promise.all 设置多次提取测试

    我在测试中使用 jest 我正在使用 React 和 Redux 并且执行以下操作 function getData id notify return dispatch gt dispatch anotherFunction Promise
  • 由于 CORS 错误,POST 请求在 React axios 中被阻止[重复]

    这个问题在这里已经有答案了 我正在尝试向包含多部分数据的 API 发送 POST 请求 我在 postman 中测试了 API 一切正常 但是当我在react中调用API时 它给了我CORS错误 我交叉检查了 URL 标头和数据 对我来说一
  • ReactJS 水平对齐material-ui 元素

    我试图在文本输入旁边有一个单选按钮 这样用户基本上可以输入问题的 答案 并标记一个首选答案 然而 Material UI 将每个都放在自己的行上 这就是我目前所拥有的 div div
  • 什么会导致 Oracle ROWID 更改?

    AFAIK Oracle 中的 ROWID 表示相应数据文件中记录的物理位置 在什么情况下记录的ROWID可能会改变 我所知道的一个是分区表上的更新 它将记录 移动 到另一个分区 还有其他情况吗 我们的大多数数据库都是 Oracle 10
  • 如何将 hls.js 与 React 结合使用

    我需要一些帮助来尝试弄清楚如何在 React 中使用 hls js 让我解释一下我必须从 api 获取 m3u8 的情况我能够使用基本的 html 使其工作
  • 如何在react-select v2中创建optgroup?

    我想在我的反应选择列表中包含 optgroups 但它似乎没有记录在任何地方 我有以下结构 是从评论中提取的https github com JedWatson react select issues 59 https github com
  • 如何使用sql脚本更改列的属性

    如何使用 sql 脚本更改列的属性 这是我尝试过但出现错误的方法 ALTER TABLE dbo tblBiometricPattern COLUMN BiometricPatternID TINYINT NOT NULL IDENTITY
  • 具有多个主键的 SQLAlchemy 不会自动设置任何

    我有一个简单的表 class test Base tablename test id Column Integer primary key True title Column String def init self title self
  • 拉拉维尔; “SQLSTATE[HY000] [2002] 连接被拒绝”

    我在 OSX 主机上设置了 homestead 2 0 并使用 Sequel Pro 我可以进行迁移并确认数据已在Sequel Pro中迁移 因此看起来数据库连接没有问题 但是 一旦我尝试从 Laravel 4 2 应用程序获取数据 它就无
  • 为 java 项目创建安装

    我创建了一个 java 项目 它使用数据库来检索 编辑和保存数据 我使用 Netbeans 完成了该项目 现在我想在该项目之外创建一个安装 为此 我想包含与项目一起安装的数据库 我用来连接数据库的代码是 Class forName com
  • 如何在create-react-app中注入没有REACT_APP前缀的dotenv变量?

    我有一个项目要从旧版 React 应用程序迁移到标准版create react app一个 未弹出 在遗留项目中 它手动加载 env文件与dotenv and dotenv expand并通过webpack注入DefinePlugin cr
  • 将数据从电子表格迁移到 RDBMS 的策略是什么?

    这与我的另一个问题相关何时从电子表格迁移到 RDBMS https stackoverflow com questions 2395607 when to switch from spreadsheet to rdbms 决定从 Excel

随机推荐