React useState中非字符串原始类型的初始占位符该如何选择？

首先给出你的Person类型定义：

type Person = {
  name: string,
  email: string,
  height: number,
  accountBalance: number,
  isParent: boolean
}

在表单场景中使用useState初始化该类型状态时，name和email用空字符串做初始值没问题，但height、accountBalance（数值类型）和isParent（布尔类型）直接用0或false会混淆“未填写占位”和“实际有效值”，这里提供几种可行的解决方案：

方案1：修改类型，允许字段为null或可选 #

这是最清晰直观的方式，通过调整类型定义，明确区分“未填写”和“已填写”状态：

方式A：将字段设为可选 #

type Person = {
  name: string,
  email: string,
  height?: number,
  accountBalance?: number,
  isParent?: boolean
}

初始化时可以给这些字段设为undefined：

const [person, setPerson] = useState<Person>({
  name: "",
  email: "",
  height: undefined,
  accountBalance: undefined,
  isParent: undefined
})

方式B：允许字段为null #

如果需要强制字段必须存在但可表示未填写状态，可将类型改为允许null：

type Person = {
  name: string,
  email: string,
  height: number | null,
  accountBalance: number | null,
  isParent: boolean | null
}

初始化时设为null：

const [person, setPerson] = useState<Person>({
  name: "",
  email: "",
  height: null,
  accountBalance: null,
  isParent: null
})

方案2：用辅助状态标记字段是否已填写 #

如果不想修改原类型，可以维护一个额外的状态对象，记录每个字段是否被用户主动修改过：

const [person, setPerson] = useState<Person>({
  name: "",
  email: "",
  height: 0,
  accountBalance: 0,
  isParent: false
})
const [isFieldFilled, setIsFieldFilled] = useState({
  height: false,
  accountBalance: false,
  isParent: false
})

// 当用户修改height时，同步更新标记
const handleHeightChange = (value: number) => {
  setPerson(prev => ({...prev, height: value}))
  setIsFieldFilled(prev => ({...prev, height: true}))
}

之后判断字段是否为有效输入时，通过isFieldFilled.height来区分是初始占位值还是用户主动设置的0。

方案3：使用特殊占位值（不推荐） #

对于数值类型，可以用NaN作为初始值（因为身高、余额不可能是NaN），布尔类型则不太适合这种方式：

const [person, setPerson] = useState<Person>({
  name: "",
  email: "",
  height: NaN,
  accountBalance: NaN,
  isParent: false // 布尔类型还是得用方案1或2
})

判断时用isNaN(person.height)来识别未填写状态，但这种方式可读性差，容易在后续逻辑中出错，不建议优先使用。

总结 #

优先推荐方案1，通过修改类型明确区分未填写和有效状态，代码可读性和维护性都更高。

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