React Hook Form：提交时高效处理空字符串到Null的策略

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

function MyForm() {
  const { handleSubmit, setValue, reset } = useForm();

  const onSubmit = data => {
    // 尝试在循环中调用 setValue
    for (const [key, value] of Object.entries(data)) {
      if (value === '') {
        setValue(key, null); // 每次调用都会更新表单状态
      }
    }
    // 此时 data 对象可能尚未完全更新
    console.log("Submitted Data (after setValue calls):", data); 
    // ... API 调用逻辑 ...
    reset();
  };

  // ... 表单JSX ...
}

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

function MyForm() {
  const { register, handleSubmit, reset } = useForm();

  const onSubmit = data => {
    // 创建一个副本以避免直接修改原始 data 对象，保持纯净性
    // 或者如果确定 data 仅用于此函数且不会被其他地方引用，直接修改也可
    let transformedData = { ...data }; 

    Object.keys(transformedData).forEach((field) => {
      if (transformedData[field] === '') {
        transformedData[field] = null;
      }
    });

    console.log("Transformed Data for API:", transformedData);
    // 假设这里是发送数据到API的方法
    // apiService.sendFormData(transformedData); 

    reset(); // 重置表单
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} placeholder="First Name" />
      <input {...register("lastName")} placeholder="Last Name" />
      <input {...register("email")} placeholder="Email" />
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

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

interface FormData {
  firstName: string | null;
  lastName: string | null;
  email: string | null;
  // 可以添加更多字段
}

function UserProfileForm() {
  const { register, handleSubmit, reset, formState: { errors } } = useForm<FormData>({
    defaultValues: {
      firstName: '',
      lastName: '',
      email: ''
    }
  });

  const onSubmit = (data: FormData) => {
    // 推荐做法：创建数据的副本进行修改
    const transformedData: FormData = { ...data };

    Object.keys(transformedData).forEach((key) => {
      // 确保只处理字符串类型的字段
      if (typeof transformedData[key as keyof FormData] === 'string' && transformedData[key as keyof FormData] === '') {
        transformedData[key as keyof FormData] = null;
      }
    });

    console.log('提交给API的数据:', transformedData);

    // 模拟API调用
    return new Promise(resolve => {
      setTimeout(() => {
        alert('表单提交成功！请查看控制台输出。');
        console.log('API收到数据:', transformedData);
        reset(); // 提交成功后重置表单
        resolve(null);
      }, 1000);
    });
  };

  return (
    <div style={{ maxWidth: '400px', margin: '50px auto', padding: '20px', border: '1px solid #ccc', borderRadius: '8px' }}>
      <h2>用户资料</h2>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div style={{ marginBottom: '15px' }}>
          <label htmlFor="firstName" style={{ display: 'block', marginBottom: '5px' }}>名:</label>
          <input
            id="firstName"
            {...register("firstName")}
            placeholder="请输入名"
            style={{ width: '100%', padding: '8px', border: '1px solid #ddd', borderRadius: '4px' }}
          />
        </div>

        <div style={{ marginBottom: '15px' }}>
          <label htmlFor="lastName" style={{ display: 'block', marginBottom: '5px' }}>姓:</label>
          <input
            id="lastName"
            {...register("lastName")}
            placeholder="请输入姓"
            style={{ width: '100%', padding: '8px', border: '1px solid #ddd', borderRadius: '4px' }}
          />
        </div>

        <div style={{ marginBottom: '15px' }}>
          <label htmlFor="email" style={{ display: 'block', marginBottom: '5px' }}>邮箱:</label>
          <input
            id="email"
            type="email"
            {...register("email")}
            placeholder="请输入邮箱"
            style={{ width: '100%', padding: '8px', border: '1px solid #ddd', borderRadius: '4px' }}
          />
        </div>

        <button
          type="submit"
          style={{
            width: '100%',
            padding: '10px 15px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
            fontSize: '16px'
          }}
        >
          提交
        </button>
      </form>
    </div>
  );
}

export default UserProfileForm;