使用React Hook Form/Shadcn Form时Input绑定对象值报错的解决咨询

报错原因 #

Input组件的value属性仅支持字符串、数字等原始类型，而你的react-hook-form表单中metadata字段经过Zod转换后是对象类型，直接将field.value（对象）传给Input会触发类型不匹配错误。你之前用JSON.stringify覆盖value虽然消除了报错，但生成的JSON格式不符合Zod校验规则，无法正常通过校验。

正确解决方案 #

核心思路是在表单对象状态和Input字符串展示之间做双向转换：将对象转成符合Zod校验格式的字符串用于展示，将用户输入的字符串回传给表单让Zod自动转换为对象。

1. 编写对象转字符串工具函数 #

实现一个函数，把metadata对象转换成key1:value1,key2:value2格式的字符串：

const metadataObjToStr = (obj) => {
  if (!obj || Object.keys(obj).length === 0) return '';
  return Object.entries(obj)
    .map(([key, value]) => `${key}:${value}`)
    .join(',');
};

2. 修正FormField与Input的绑定 #

不要直接展开{...field}，手动处理Input的value和onChange：

<FormField
  control={form.control}
  name="metadata"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Metadata</FormLabel>
      <FormControl>
        <Input
          value={metadataObjToStr(field.value)}
          onChange={(e) => field.onChange(e.target.value)}
          disabled={!editMode}
        />
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>

3. 表单初始化处理 #

从API获取到团队详情后，重置表单时要将metadata对象转换为符合格式的字符串：

// 假设已获取到teamInfo
form.reset({
  ...teamInfo,
  metadata: metadataObjToStr(teamInfo.metadata)
});

为什么这样做 #

• Input展示的是完全符合Zod校验规则的字符串，用户输入时只需遵循key:value逗号分隔的格式，体验更直观
• 表单内部状态依然是转换后的对象，符合业务逻辑需求
• 彻底解决类型不匹配问题，同时保证校验和转换流程正常运行

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