Redux Form：不提交表单为字段设置错误的实现方案

看起来你是想在API调用失败时给单个字段设置错误提示，但用stopSubmit没达到预期——这很正常，因为stopSubmit是用来设置表单级别的提交错误，而不是单个字段的错误。下面分两种常见的表单库场景给你解决方案：

如果你用的是 React Final Form #

这是最符合你代码里<Field>组件写法的场景，你需要调用表单实例的setFieldError方法来给单个字段设置错误：

步骤1：获取表单实例并设置字段错误 #

你可以通过Form组件的render prop拿到form对象，或者用useForm钩子（函数组件）直接获取：

import { Form, useForm } from 'react-final-form';

const YourFormComponent = () => {
  // 用useForm钩子获取表单实例
  const form = useForm();

  const loadUserData = async () => {
    try {
      const { data } = await UserService.getUser();
      // 处理成功返回的数据
    } catch (e) {
      // 核心：调用setFieldError给username字段设置错误
      form.setFieldError('username', 'Something wrong happened.');
      // 可选：如果想让错误立刻显示，手动标记字段为已触碰状态
      form.setFieldTouched('username', true);
    }
  };

  return (
    <Form
      name="myFormName"
      onSubmit={/* 你的提交逻辑 */}
      render={({ handleSubmit }) => (
        <form onSubmit={handleSubmit}>
          <Field name="username" component={CustomCombobox} />
          <button type="button" onClick={loadUserData}>加载用户数据</button>
        </form>
      )}
    />
  );
};

步骤2：确保自定义组件显示错误 #

你的CustomCombobox需要接收并渲染meta.error属性（React Final Form会自动把这个属性传递给Field的component）：

const CustomCombobox = ({ input, meta }) => {
  return (
    <div className="form-group">
      {/* 你的下拉框核心逻辑 */}
      <input {...input} placeholder="Username" />
      {/* 仅当字段被触碰且存在错误时展示提示 */}
      {meta.touched && meta.error && (
        <span className="error-text">{meta.error}</span>
      )}
    </div>
  );
};

如果你用的是 React Hook Form #

如果你的项目用的是React Hook Form，方法类似，使用setError函数即可：

import { useForm } from 'react-hook-form';

const YourFormComponent = () => {
  const { register, setError, formState: { errors } } = useForm();

  const loadUserData = async () => {
    try {
      const { data } = await UserService.getUser();
    } catch (e) {
      // 给username字段设置错误信息
      setError('username', {
        message: 'Something wrong happened.'
      });
    }
  };

  return (
    <form>
      <CustomCombobox
        {...register('username')}
        // 将错误传递给自定义组件
        error={errors.username?.message}
      />
      <button type="button" onClick={loadUserData}>加载用户数据</button>
    </form>
  );
};

之后在CustomCombobox里渲染传入的error属性就能显示错误提示了。

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