Remix.js表单Action仅移动浏览器不触发的问题排查

我有一个React函数组件，负责接收上传的图片并通过表单提交。该功能在Mac笔记本的浏览器中运行完全正常，但在iOS设备的Chrome/Safari浏览器中，对应的Action从未被触发。

表单代码 #

<Form className="basis-2/12 flex justify-center items-center" ref={formRef} onSubmit={handleSubmit} method="post">
  <input type="hidden" name="fileUrl" value={originalPhoto as string} />
  <input type="hidden" name="fileName" value={photoName as string} />
  <button className="btn btn-outline text-orange-200 border-orange-200" disabled={!originalPhoto} type="submit">
    Restore Photo
  </button>
</Form>

handleSubmit函数代码 #

const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
  try {
    event.preventDefault()
    setLoading(true)
    console.log('form ref >>> ', formRef.current?.submit)
    formRef.current?.submit()
  } catch (err) {
    console.log('Encountered an error ', err)
  }
}

Action代码 #

export let action: ActionFunction = async ({ request }) => {
  console.log('CALLED ACTION')
  try {
    const formData = await request.formData()
    const fileUrl = formData.get('fileUrl') as string
    const fileName = formData.get('fileName') as string

    const replicateAPIKey = process.env.REACT_APP_REPLICATE_KEY

    const response = await restorePhoto(fileUrl, replicateAPIKey as string)

    if (response) {
      let newPhoto = await response.json()
      if (response.status !== 200) {
        return json({ error: newPhoto }, response.status)
      } else {
        return json({ restoredImage: newPhoto, originalPhoto: fileUrl, fileName })
      }
    }
  } catch (err) {
    console.error(err)
    return json({ error: 'There was an unexpected error processing your request. Please try again later.' }, 500)
  }
}

日志显示iOS浏览器中无错误日志且submit函数存在，但Action在移动设备上未触发且无日志输出，请问可能的原因是什么？

可能的原因及修复方案 #

• iOS浏览器的表单提交安全限制：iOS的Safari/Chrome会拦截非用户直接触发的表单提交。你的代码先通过event.preventDefault()阻止了按钮的原生提交行为，之后手动调用formRef.current?.submit()，这种间接提交可能被浏览器的安全机制判定为非用户主动操作而拦截。
  修复：移除event.preventDefault()和手动调用submit()的逻辑，让按钮的原生submit行为直接触发表单提交。如果需要在提交前执行加载状态设置，可在handleSubmit中先执行setLoading(true)，不阻止默认行为即可。

• 异步函数的时序问题：handleSubmit被声明为异步函数，但表单提交是同步操作，iOS浏览器的事件循环处理机制可能导致异步上下文里的提交操作被忽略。
  修复：去掉async关键字，将handleSubmit改为同步函数（当前代码中没有需要等待的异步逻辑，完全可以改为同步）。

• 封装Form组件的移动端兼容性问题：你使用的Form组件（看起来是框架封装的组件，比如Remix或类似框架）在iOS设备上可能存在内部逻辑冲突，导致提交事件未正确传递到Action。
  修复：临时替换为原生<form>标签进行测试，若能正常触发Action，则排查封装组件的移动端适配配置或换用原生表单实现。

• 表单属性缺失或不正确：未显式指定表单的编码类型或提交路径，可能导致iOS浏览器无法正确解析提交请求。
  修复：给表单添加enctype="application/x-www-form-urlencoded"（若不需要上传文件，默认类型也可显式声明），同时确保表单的action属性正确指向你的Action路由（部分框架需要显式指定）。

内容的提问来源于stack exchange，提问作者Sachin Karia