React/TypeScript复用新增/编辑表单的对象初始化方案咨询

• 方案1存在两个核心缺陷：
  1. 逻辑断裂：你当前代码里输入框直接绑定的是props传入的dog属性，而非组件内部state的value，用户输入时没有状态驱动更新，输入框会无法响应用户输入。
  2. 异步数据兼容问题：useState的初始值仅在组件首次挂载时生效，如果是编辑场景，dog数据是接口异步返回后才传入组件的，首次挂载时拿不到dog数据，后续props更新也不会同步到内部state，会出现表单无法回填的问题。
• 方案2完全不可取：as类型断言只是编译阶段欺骗TS类型检查，运行时空对象不会凭空生成name、type属性，彻底丢失类型安全性，后续做字段校验、提交逻辑时会频繁出现undefined相关报错，属于典型的掩盖问题而非解决问题。

首先修正组件Props类型定义，从类型层面明确支持新建、编辑两种场景的入参，从根源避免需要类型断言的问题：

interface IDog {
  name: string
  type: string
}

interface IDogFormProps {
  // 编辑场景传入已有狗狗数据，新建场景可不传/传undefined
  initialDog?: IDog
  onSubmit: (dogFormValue: IDog) => Promise<void> | void
}

组件内部统一做默认值兜底，同时兼容异步初始值回填、表单双向绑定逻辑：

// 抽离统一的空表单默认值，避免重复定义
const DEFAULT_DOG_FORM_VALUE: IDog = {
  name: '',
  type: ''
}

const DogForm = (props: IDogFormProps) => {
  const { initialDog, onSubmit } = props
  // 初始化时优先用传入的初始值，没有就兜底默认空值
  const [formValue, setFormValue] = useState<IDog>(
    initialDog ?? DEFAULT_DOG_FORM_VALUE
  )

  // 兼容编辑场景异步拉取数据的情况：初始值从无到有时同步到表单状态
  useEffect(() => {
    if (initialDog) {
      setFormValue(initialDog)
    }
  }, [initialDog])

  // 统一处理输入框值变更
  const handleValueChange = (field: keyof IDog, e: React.ChangeEvent<HTMLInputElement>) => {
    setFormValue(prev => ({
      ...prev,
      [field]: e.target.value.trimStart()
    }))
  }

  return (
    <div className="dog-form">
      <input
        value={formValue.name}
        onChange={(e) => handleValueChange('name', e)}
        placeholder="请输入狗狗名称"
      />
      <input
        value={formValue.type}
        onChange={(e) => handleValueChange('type', e)}
        placeholder="请输入狗狗品种"
      />
      <button onClick={() => onSubmit(formValue)}>提交</button>
    </div>
  )
}

父组件调用时不需要做任何类型hack，两种场景的调用都符合类型约束：

// 新建场景：不传initialDog即可
<DogForm onSubmit={async (values) => {
  await fetch('/api/dog', { method: 'POST', body: JSON.stringify(values) })
}} />

// 编辑场景：传入已有的狗狗数据，支持异步传入
{dogData && <DogForm 
  initialDog={dogData} 
  onSubmit={async (values) => {
    await fetch(`/api/dog/${dogData.id}`, { method: 'PUT', body: JSON.stringify(values) })
  }} 
/>}

如果你的表单字段较多、存在复杂校验/联动逻辑，直接用react-hook-form这类成熟表单库即可，默认值处理、异步回填、校验逻辑都有现成封装，不需要手动写useEffect同步状态，代码会更简洁。

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