Inertia.js v3.7.0 提供了
<Form>
组件有两种方法可以中止仍在进行中的提交:a
cancel
你称之为自己的方法,以及一个
cancelOnUnmount
表单离开页面时触发的属性。此次发布还添加了响应式功能。
polling
值
usePoll
并防止在导航时取消后台异步访问。
cancelOnUnmount在<Form>表单卸载时中止提交cancel现在通过以下方式暴露出来<Form>插槽属性、引用和上下文usePoll返回polling价值与start和stop- 道具在一次短暂的参观后仍能保持其价值。
- 离开其他页面不再会取消针对其他页面的异步访问。
- 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
返回
start
和
stop
仅此而已。渲染暂停和恢复切换按钮意味着要让你的布尔值与这两个调用保持同步,并记住从……中获取初始值。
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)并扔一个TypeError。getFormData现在返回一个空对象FormData当表单元素消失时。贡献者 尼克·尼兰德 这是他们对该项目的第一份贡献( #3203 )。
安装
通过软件包管理器升级,并使用您的应用程序所在的适配器:
npm
安装
@inertiajs/vue3@^3.7.0# 或 @inertiajs/react,@inertiajs/svelte
参考
- 完整更新日志
- Inertia.js v3.0.0 版本发布,新增乐观更新、useHttp 等功能。
- 取消表单提交 在 Inertia.js 文档中







