ReactJS中如何保留表单向导中下拉列表的选中值？

核心原因 #

返回上一步时子分类选中值丢失，是因为组件选中状态没和Formik的表单值正确绑定，加上主分类切换时未校验子分类有效性，导致状态不同步。

修复方案 #

1. 绑定Formik值到组件

给TextField添加value属性，直接使用Formik维护的subCategory值，让组件选中状态和表单状态保持同步。

2. 移除冗余本地状态

既然用Formik管理表单，没必要单独维护subCategory本地状态，直接通过handleValChange更新表单值即可，减少状态不一致的风险。

3. 主分类切换时校验子分类有效性

当主分类改变时，检查当前选中的子分类是否属于新主分类的子列表，不属于则重置为默认值，避免出现无效选中项。

修改后的完整代码 #

<TextField
    select
    className={clsx('SelectMenu', styles.SelectMenu)}
    SelectProps={{ displayEmpty: true }}
    // 绑定Formik的subCategory值，默认显示"Select"
    value={values.subCategory || "Select"}
    // 直接通过Formik方法更新表单值
    onChange={(e) => handleValChange("subCategory", e.target.value)}
>
    <MenuItem value={"Select"} disabled>Select</MenuItem>
    {selectedMainCat[0] && selectedMainCat[0].subCategory.map((data, i) => (
        <MenuItem key={i} value={data.name}>{data.name.toUpperCase()}</MenuItem>
    ))}
</TextField>

主分类切换的补充处理 #

在主分类的选择事件中加入校验逻辑：

const handleMainCategoryChange = (selectedValue) => {
    // 更新主分类的表单值
    handleValChange("mainCategory", selectedValue);
    // 找到当前选中的主分类数据
    const currentMainCat = mainCategoryList.find(cat => cat.name === selectedValue);
    // 检查现有子分类是否属于当前主分类的子列表
    const isSubCategoryValid = currentMainCat?.subCategory.some(sub => sub.name === values.subCategory);
    // 无效则重置子分类为默认值
    if (!isSubCategoryValid) {
        handleValChange("subCategory", "Select");
    }
};

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