如何在React-Remix中用useFetcher Hook和fetcher.submit()获取表单提交数据

以下是你需要对代码进行的关键修改，以及完整的实现示例：

核心修改点 #

• 修正变量名冲突：避免使用fetch作为useFetcher的返回变量名（它是浏览器原生API），改为fetcher防止运行时异常。
• 完善Action函数逻辑：实现表单数据的解析、验证与返回逻辑，让前端能获取提交结果。
• 前端状态与结果处理：利用fetcher的内置状态（state）处理加载状态，通过fetcher.data获取后端返回的提交结果。
• 规范HTML属性：给输入框补充id属性，与name对应，符合HTML标准。

修改后的完整代码 #

import { useEffect } from 'react';
import { useFetcher } from '@remix-run/react'
import { ActionFunction } from '@remix-run/node';

function FetchHookDemo() {
    // 修正变量名，避免覆盖原生fetch API
    const fetcher = useFetcher();

    useEffect(() => {
        console.log("useEffect");
    }, []);

    // 可选：手动提交表单的自定义逻辑示例
    const handleManualSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        const formData = new FormData(e.currentTarget as HTMLFormElement);
        fetcher.submit(formData, {
            action: '/fetcher',
            method: 'post'
        });
    };

    return (
        <div>
            <h1>Use Fetcher Hook</h1>
            {/* 使用修正后的fetcher.Form组件 */}
            <fetcher.Form action='/fetcher' method='post'>
                <div>
                    <input type="text" name="name" id="name" placeholder="输入你的名字" />
                    {/* 根据提交状态禁用按钮并显示提示 */}
                    <button type='submit' disabled={fetcher.state === 'submitting'}>
                        {fetcher.state === 'submitting' ? '提交中...' : '提交'}
                    </button>
                </div>
            </fetcher.Form>

            {/* 渲染提交后的结果 */}
            {fetcher.data && (
                <div style={{ marginTop: '20px' }}>
                    {fetcher.data.error ? (
                        <p style={{ color: 'red' }}>{fetcher.data.error}</p>
                    ) : (
                        <p>你输入的名字是：{fetcher.data.name}</p>
                    )}
                </div>
            )}

            {/* 可选：手动提交的表单示例 */}
            <form onSubmit={handleManualSubmit} style={{ marginTop: '20px' }}>
                <input type="text" name="name" id="manual-name" placeholder="手动提交测试" />
                <button type='submit' disabled={fetcher.state === 'submitting'}>
                    {fetcher.state === 'submitting' ? '提交中...' : '手动提交'}
                </button>
            </form>
        </div>
    )
}

export default FetchHookDemo;

// 实现Action函数，处理表单提交请求
export const action: ActionFunction = async ({ request }) => {
    // 解析表单数据
    const formData = await request.formData();
    const name = formData.get('name');

    // 简单的数据验证
    if (!name || typeof name !== 'string' || name.trim() === '') {
        return { error: '请输入有效的名字' };
    }

    // 这里可以添加数据存储、调用API等业务逻辑
    // ...

    // 返回处理结果，前端通过fetcher.data获取
    return { name: name.trim() };
};

关键逻辑说明 #

1. Action函数：通过request.formData()获取提交的表单数据，完成验证后返回结果；如果验证失败，返回错误信息供前端展示。
2. 前端状态管理：
   • fetcher.state包含idle/loading/submitting三种状态，用来控制按钮禁用状态和加载提示。
   • fetcher.data会自动接收Action函数返回的结果，无需额外的状态管理。
3. 两种提交方式：
   • 使用fetcher.Form：自动绑定提交逻辑，无需手动处理表单数据。
   • 使用fetcher.submit()：适合需要自定义提交逻辑（比如额外参数处理、前置验证）的场景。

内容的提问来源于stack exchange，提问作者Anubhav Joria