React使用useState存储对象类型结合Formik表单出现TS类型报错如何解决

你定义的optionGender类型为{value: string, label: string}，要求两个属性均为非空字符串。而你在赋值时使用了可选链e?.value、e?.label，如果e为undefined，这两个表达式的返回值就是undefined，和你定义的类型不匹配，因此触发TS类型报错。

• 方案1：为空值添加兜底默认值
  用空值合并运算符??给返回值加兜底，保证返回值始终是字符串类型，修改onChange逻辑如下：

onChange = {(e) => {
    setOptionGender({
        value: e?.value ?? '',
        label: e?.label ?? ''
    })
}}

• 方案2：添加类型断言（适用于确定e不会为空的场景）
  如果你使用的是react-select组件且未开启可清空选项，选中时回调参数e一定是有值的，可以直接对e做类型断言：

onChange = {(e) => {
    const selectedOption = e as {value: string, label: string}
    setOptionGender({
        value: selectedOption.value,
        label: selectedOption.label
    })
}}

• 方案3：直接使用Formik管理状态（更推荐）
  你不需要额外用useState维护gender的值，Formik本身会托管所有表单字段的状态，直接调用Formik提供的setFieldValue更新字段即可，省去额外状态维护的成本：

<Formik
    {/* 原有其他配置保持不变 */}
>
    {({ setFieldValue }) => (
        <Form>
            {/* 原有其他表单字段保持不变 */}
            <Select 
                name = "gender" 
                id = "gender" 
                placeholder = "Select ..." 
                options = {options} 
                onChange = {(e) => {
                    if(e) setFieldValue('gender', e)
                }}
            />
            {/* 原有其他表单字段保持不变 */}
        </Form>
    )}
</Formik>

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