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 对象可能仍包含原始的空字符串值
      }
    }
    // 在这里直接使用 data 对象发送到 API，可能不会反映 setValue 的更改
    // (Method here for sending data to api with original data)
    reset();
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 表单字段 */}
      <input name="username" defaultValue="" />
      <input name="email" defaultValue="test@example.com" />
      <button type="submit">提交</button>
    </form>
  );
}

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

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

  const onSubmit = data => {
    // 创建一个可修改的数据副本，或者直接修改传入的 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方法，传入 transformedData
    // 例如: await myApiService.sendData(transformedData);

    reset(); // 提交成功后重置表单
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 你的表单字段 */}
      <label>用户名: <input name="username" defaultValue="" /></label><br/>
      <label>邮箱: <input name="email" defaultValue="some@example.com" /></label><br/>
      <label>地址: <input name="address" defaultValue="" /></label><br/>
      <button type="submit">提交</button>
    </form>
  );
}

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

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

  const onSubmit = data => {
    const transformedData = Object.fromEntries(
      Object.entries(data).map(([key, value]) => [
        key,
        value === '' ? null : value
      ])
    );

    console.log('Transformed Data for API (Functional):', transformedData);
    // 在这里调用你的API方法，传入 transformedData
    // 例如: await myApiService.sendData(transformedData);

    reset();
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 你的表单字段 */}
      <label>用户名: <input name="username" defaultValue="" /></label><br/>
      <label>邮箱: <input name="email" defaultValue="some@example.com" /></label><br/>
      <label>地址: <input name="address" defaultValue="" /></label><br/>
      <button type="submit">提交</button>
    </form>
  );
}