消息

在 Inertia.js v3.7 中取消飞行中表单提交

发布
在 Inertia.js v3.7 图片中取消飞行中表单提交

Inertia.js v3.7.0 提供了 <Form> 组件有两种方法可以中止仍在进行中的提交:a cancel 你称之为自己的方法,以及一个 cancelOnUnmount 表单离开页面时触发的属性。此次发布还添加了响应式功能。 pollingusePoll 并防止在导航时取消后台异步访问。

  • cancelOnUnmount<Form> 表单卸载时中止提交
  • cancel 现在通过以下方式暴露出来 <Form> 插槽属性、引用和上下文
  • usePoll 返回 polling 价值与 startstop
  • 道具在一次短暂的参观后仍能保持其价值。
  • 离开其他页面不再会取消针对其他页面的异步访问。
  • React 的修复 back_forward 恢复, replaceProp 道具标识,以及一个 <Form> 卸载崩溃

什么是新的

表单卸载时取消提交

正在进行中的提交操作会比发起它的组件持续更长时间。离开当前页面会取消提交,但这只是下一个同步请求中断前一次访问的副作用。关闭模态框不会中断任何操作,因此用户以为已经放弃的缓慢头像上传操作仍然会完成,并仍然会被服务器处理。

<Form> 组件现在需要一个 cancelOnUnmount 表单卸载时取消请求的属性:

React 和 Svelte 适配器中都存在相同的属性。 cancelOnUnmount 默认值为 false 因此,现有表单将保持当前的行为,即等待请求完成。它和 cancel 以下方法将在下文中介绍。 表格取消文件

已经成功的提交将保持不变。为了实现这一点,该拉取请求还更改了核心请求处理,以便将传递给的函数 onCancelToken 一旦响应到达,该操作就变成了无效操作。此时取消操作也无法阻止任何事情,因为页面已经在更新,但它确实触发了一个事件。 onCancel 事件发生后 onSuccess 这对于常见的模态模式来说很重要,其中 onSuccess 关闭对话框:表单在响应到达后立即卸载,如果没有此保护,卸载钩子将取消已完成的请求。

公关稿: #3225

A cancel 方法论 <Form> 成分

<Form> 成分 一直以来都使用 useForm() 内部存在,但从未以那种形式出现。 cancel 由于这种方法,没有一种简洁的方法来为大型上传添加取消按钮。 cancel 现在可以通过插槽属性、组件引用和表单上下文在所有三个适配器中访问:

React适配器也以相同的方式通过render属性传递它:

< 形式 行动 = "/avatar" 方法 = “邮政” >
{({ 加工 , 取消 }) =>
<>
< 输入 类型 = “文件” 姓名 = “化身” />
< 按钮 类型 = “提交” 已禁用 = {processing}>上传</ 按钮 >
{加工 &&
< 按钮 类型 = “按钮” 点击 = {cancel}>取消</ 按钮 >
)}
)}
</ 形式 >

公关稿: #3224

usePoll 报告它是否正在运行

投票 usePoll 返回 startstop 仅此而已。渲染暂停和恢复切换按钮意味着要让你的布尔值与这两个调用保持同步,并记住从……中获取初始值。 autoStart 选项。现在该钩子会返回一个响应式对象。 polling 它可以自动跟踪该值:

进口 { 使用投票 } '@inertiajs/vue3'
常量 { 开始 , 停止 , 轮询 } = 使用投票 2000
< 模板 >
< 按钮 v-if = 轮询 @ 点击 = 停止 >暂停更新</ 按钮 >
< 按钮 v-其他 @ 点击 = 开始 >简历更新</ 按钮 >
</ 模板 >

它反映的是投票是否正在进行,而不是当前是否有请求正在处理中,所以它会一直保持这样。 true 在请求之间的空隙中。 投票文件 显示所有三个适配器中的暂停和恢复模式。初始值来自 autoStart 默认值为 true 在 Vue 中,该值是一个 Ref<boolean> 在 React 中,它是 useState ,Svelte适配器也移动了。 usePoll.svelte.ts 文件以便它可以支持该值 $state 最后这个改动意味着 Svelte 用户解构返回值会失去响应式特性,所以要保留对象并读取它。 poll.polling

公关稿: #3220

道具经受住即时访问的考验

惯性的 道具 这些属性会被解析一次,然后被客户端记住,因此后续包含相同属性的页面会重用该值,而无需再次请求服务器计算。 即时访问 硬币的另一面是:给予 <Link> 或者 router.visit() 目标 component 该页面会立即进行名称互换,而真正的请求则在后台运行。

总而言之,它们导致数据丢失。占位符页面由共享属性和访问者提供的数据构建而成,这导致 `once` 属性的值及其注册信息均丢失。一个已经获取了该属性的预取操作在解析时由于没有数据可供恢复,最终该属性返回为空。

现在,路由器会在交换之前将每个记住一次的属性及其注册表项复制到占位符页面上,除非访问为该属性提供了自己的值,在这种情况下,传入的值会生效。

公关稿: #3221

异步访问不再因导航而被取消。

当您导航到其他页面时,惯性会取消正在进行的请求,这正是您希望看到的,因为延迟属性和部分重新加载都属于您即将离开的页面。但这个检查范围太广了。它还会阻止指向其他页面的显式异步访问,因此点击异步链接也会导致问题。 <Link> 两次,或者在异步请求运行时导航到其他位置,都会取消之前的请求。

取消操作现在会根据请求的来源和路径进行匹配,并且只会取消指向当前被导航离开页面的请求。延迟属性、部分重新加载、 router.reload() 所有投票都针对当前页面,并像以前一样被取消,而对其他页面的后台异步访问则被保留完成。

公关稿: #3198

修复

本次更新还修复了三个问题:

  • React 在标签页重复后保留了过时的 props。 Chrome 和 Firefox 都将重复的标签页报告为 back_forward 由于导航机制,Inertia 会从历史状态恢复页面,包括延迟加载的 props。React 适配器在页面加载时丢弃了恢复的页面,因为它假设挂载后的第一次更新总是重复服务器端渲染的页面,这导致了问题。 usePage() 卡在了初始属性上。适配器现在只跳过初始页面的重新渲染,并保留在应用程序挂载之前到达的更新,以便可以重放它。Vue 和 Svelte 不受影响( #3196 )。
  • replaceProp() 赋予每个道具新的身份。 使用深度克隆创建新的道具对象意味着 replaceProp , appendToProp , 和 prependToProp 重新渲染的记忆化组件会消耗不相关的属性,并且每次调用都需要完整克隆一次。现在,路径感知的不可变集合只会复制路径上的容器,这与部分重新加载处理未修改属性的方式一致。贡献者 斯维亚托斯拉夫·克留科夫#3194 )。
  • <Form> 卸载时可能会抛出异常。 React适配器通过延迟执行其脏状态检查。 startTransition 卸载时不会被取消,因此 input 或者 change 在导航离开之前触发的事件可能会运行 new FormData(null) 并扔一个 TypeErrorgetFormData 现在返回一个空对象 FormData 当表单元素消失时。贡献者 尼克·尼兰德 这是他们对该项目的第一份贡献( #3203 )。

安装

通过软件包管理器升级,并使用您的应用程序所在的适配器:

npm 安装 @inertiajs/vue3@^3.7.0
# 或 @inertiajs/react,@inertiajs/svelte

参考

保罗·雷德蒙德照片

Laravel News 特约撰稿人。全栈 Web 开发人员兼作家。

赞助

Laravel Cloud 标志
Laravel 云

轻松创建和管理服务器,并在几秒钟内部署 Laravel 应用程序。

访问 Laravel Cloud
组合:多列上的精妙关系图

组合:多列上的精妙关系

阅读文章
MKSine:一款基于 Filament 的 CMS,支持插件、主题和模块(图片)

MKSine:一款基于 Filament 的内容管理系统,支持插件、主题和模块

阅读文章
Laravel Starter Kits 现在附带 Vite+ 图片

Laravel Starter Kits 现在随附 Vite+

阅读文章
Laravel Eloquent 中使用 refreshForUpdate() 实现悲观锁定 图片

Laravel Eloquent 中使用 refreshForUpdate() 实现悲观锁定

阅读文章
Laravel 异常消息中的掩码查询绑定图片

Laravel 异常消息中的查询绑定掩码

阅读文章
whereBinary():Laravel 图片中区分大小写的 MySQL 查询

whereBinary():Laravel 中区分大小写的 MySQL 查询

阅读文章