html - React - 选择元素的值不随状态变化而变化

Question

我正在做一个项目，在创建用户时我必须选择城市、机构和部门。当您选择城市时，您会获得该城市的机构列表，而当您选择机构时，您会获得部门。我想要实现的是当您选择另一个城市、机构和部门时重置为默认值。问题是它不起作用。

这是代码：

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

这是 state 和 handleChange 方法：

const [caregiverState, setCaregiverState] = useState<ICaregiver>({
        name: '',
        description: '',
        email: '',
        city: '',
        institution: '',
        department: '',
        role: 'caregiver',
    });

        const handleChange = (e): void => {
        switch (e) {
            case e.target.name === 'city':
                return setCaregiverState({
                    ...caregiverState,
                    institution: '',
                    department: '',
                });
            case e.target.name === 'institution':
                return setCaregiverState({
                    ...caregiverState,
                    department: '',
                });
            default:
                return setCaregiverState({
                    ...caregiverState,
                    [e.target.name]: e.target.value,
                });
        }
    };

问题是即使我将状态更改为“”选择元素也不会将其更改为：

  <option value="" selected disabled >
                                        Select institution
                                    </option>

我实际上是从 map()

提前致谢！

标签： htmlreactjsnext.js