React中select下拉框值不随state更新、三级联动重置失效问题

开发者阿泽

2026-9-27

问题原因

你遇到的问题由两个核心错误导致：

handleChange 的逻辑完全没有正常触发：switch 语句的判断逻辑写反，且切换城市/机构时没有更新对应字段本身的值，导致切换城市时根本没有执行机构、部门的重置逻辑
下拉框的默认占位选项顺序错误，且加了多余属性：空值的默认option放在了动态渲染的机构选项之后，还增加了hidden、冗余的selected属性，导致就算state重置为空也匹配不到正确的展示选项

修复方案

1. 修正handleChange逻辑

把错误的switch写法改成更易读的if判断，同时补全字段更新逻辑：

const handleChange = (e: React.ChangeEvent<HTMLSelectElement>): void => {
  const { name, value } = e.target;
  if (name === 'city') {
    // 切换城市时更新城市值，同时清空机构、部门
    setCaregiverState({
      ...caregiverState,
      city: value,
      institution: '',
      department: '',
    });
  } else if (name === 'institution') {
    // 切换机构时更新机构值，同时清空部门
    setCaregiverState({
      ...caregiverState,
      institution: value,
      department: '',
    });
  } else {
    // 其他字段正常更新
    setCaregiverState({
      ...caregiverState,
      [name]: value,
    });
  }
};

2. 调整下拉框option结构

把默认占位option放到最前面，删除冗余的selected、hidden属性，React受控组件完全由select绑定的value控制选中状态，不需要给option加selected属性：

<select
  autoComplete="off"
  name="institution"
  value={caregiverState.institution}
  onChange={(e) => {
    handleChange(e);
    handleDepartmentQuery(e);
  }}
>
  <option value="" disabled>请选择机构</option>
  {institutions.map((institution: IInstitution, index: number): ReactElement => {
    return (
      <option key={index} value={institution._id}>
        {institution.name}
      </option>
    );
  })}
</select>