React联动Select组件切换后未正确更新选中值问题求助

问题描述 #

切换第一个选择框的分类（从"Fruits"改为"Vegetable"）时，第二个选择框的选项已更新为对应分类的列表，但仍显示之前选中的水果选项，需要实现切换分类后自动选中新分类的第一个选项。

修复方案 #

核心是在切换分类时，同步更新二级选择框的选中状态为新分类列表的第一个元素：

1. 修改分类切换处理函数
   在handleChange函数中，设置新分类后，立即将selectedItem设为该分类下的第一个选项：

const handleChange = (e) => {
  const newCategory = e.target.value;
  setCategory(newCategory);
  // 切换分类后自动选中第一个选项
  setSelectedItem(options[newCategory][0]);
};

2. 确保初始选中状态正确
   如果初始category是"Fruits"，selectedItem的初始值也应设为水果列表的第一个元素：

const [selectedItem, setSelectedItem] = useState(options.Fruits[0]);

效果验证 #

修改后，切换第一个选择框的分类时，第二个选择框会自动选中当前分类下的第一个选项，不会再显示之前分类的选中值，实现状态与选项列表的同步。

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