React-Select组件重置问题：状态已更新但选中值未同步

问题核心在于你当前的React-Select是非受控组件，它自己维护选中状态，父组件的structureTypes更新后没有同步到组件上，所以重置state后界面没变化。

修复步骤： #

1. 让Select成为受控组件，通过父组件传递value属性绑定选中状态
2. 在父组件中根据structureTypes.departmentId找到对应的选项，传递给子组件

修改父组件代码：

const [structureTypes, setStructureTypes] = useState({
    departmentId: '',
});

// 根据当前departmentId找到对应的选项
const selectedDepartment = departments.find(
  dept => dept.parentDepartmentId === structureTypes.departmentId
) || null;

const handleChangeDepartmentId = useCallback((selectedOption) => {
    setStructureTypes((prevState) => ({
        ...prevState,
        departmentId: selectedOption.parentDepartmentId,
    }));
}, []);

<SimpleSelectComponent
      name="departmentId"
      title="Department"
      getOptionLabel={(option) => option?.parentDepartmentName}
      getOptionValue={(option) => option?.parentDepartmentId}
      options={departments}
      onChange={handleChangeDepartmentId}
      value={selectedDepartment} {/* 新增：传递选中的选项 */}
/>

修改子组件代码：

import Select from 'react-select';

// 新增value参数
const SimpleSelectComponent = ({ title, getOptionLabel, getOptionValue, options, onChange, value}) => {
    return (
      <div className="form-group">
        <label>{title}</label>
        <Select
          getOptionLabel={getOptionLabel}
          getOptionValue={getOptionValue}
          options={options}
          onChange={onChange}
          value={value} {/* 新增：绑定选中状态 */}
        />
      </div>
    );
  }

export default SimpleSelectComponent;

原理说明： #

React-Select默认内部管理选中状态，当你把value属性绑定到父组件的计算值后，组件就变成了受控组件，选中状态完全由父组件的state控制。点击重置按钮时，structureTypes.departmentId被设为空字符串，selectedDepartment会变成null，Select组件就会自动清空选中内容，实现状态与界面同步。

内容的提问来源于stack exchange，提问作者Rahil Əliyev