React Hook Form中setValue设置Null无效，寻求解决办法

问题重现 #

你尝试在onSubmit里用setValue把表单中空字符串的字段设为null，但操作没生效，原代码如下：

const onSubmit = data => {
    for (const [key, value] of Object.entries(data)) {
      if (value === '') {
        setValue(key, null)
      }
    }
    // 这里是发送API的代码
    reset();
  }
}

你自己找到了临时方案：

const onSubmit = data => {
    let newData = data;

    Object.keys(newData).forEach((field) => {
      if (newData[field] === '') {
        newData[field] = null
      }
    })
    // 这里是发送API的代码
    reset();
  }

为什么原方法不生效 #

1. setValue是异步操作，在onSubmit里调用后，不会立刻修改当前的data对象，你提交用的还是原来的表单快照数据。
2. 你在调用setValue后马上执行了reset()，直接把表单重置，覆盖了setValue的修改，导致完全看不到效果。

优化后的解决方案 #

方案1：安全修改提交数据（优化你的临时方案） #

直接修改data对象时，最好做一次浅拷贝，避免意外修改React Hook Form内部的表单状态：

const onSubmit = (data) => {
  // 浅拷贝原数据，避免修改原对象
  const submitData = { ...data };
  Object.keys(submitData).forEach((field) => {
    if (submitData[field] === '') {
      submitData[field] = null;
    }
  });
  // 用submitData调用API
  // apiCall(submitData);
  reset();
};

方案2：用React Hook Form内置的transform（更优雅） #

在初始化useForm时，使用transform配置项，自动在提交前转换空字符串为null，不用在onSubmit里手动处理：

const { register, handleSubmit, reset } = useForm({
  defaultValues: {
    // 你的默认值
  },
  transform: (values) => {
    const transformed = { ...values };
    Object.keys(transformed).forEach(key => {
      if (transformed[key] === '') {
        transformed[key] = null;
      }
    });
    return transformed;
  }
});

const onSubmit = (data) => {
  // 这里的data已经是转换后的，直接调用API即可
  // apiCall(data);
  reset();
};

方案3：针对单个字段配置解析规则 #

如果只需要针对特定字段处理，可以在register时配置setValueAs：

<input 
  {...register('username', {
    setValueAs: (value) => value === '' ? null : value
  })}
/>

这样单个字段在输入为空时，会自动转为null存入表单状态。

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