我有两个自动完成组件和一个元素，单击该元素会在两个自动完成组件之间切换值。当我这样做时，我也会切换选项。在自动完成组件中，我正在使用所选值渲染隐藏字段。当我单击切换值的元素时，我可以在 DOM 中看到隐藏字段在 2 个自动完成组件之间正确更新。当我单击下拉菜单时，我还可以看到正在切换的选项。但标签/文本字段没有更新。原始标签将保留，不会更新为新标签。
父组件：
import React, { useState, useEffect, Suspense } from 'react';
import classes from './AirForm.module.css';
const AirType = React.lazy(() => import('./Controls/Air/AirType'));
const Airport = React.lazy(() => import('./Controls/Air/Airport'));
const AirForm = props => {
const [airTypeSelected, setAirTypeSelected] = useState('RoundTrip');
const [fromSelected, setFromSelected] = useState();
const [fromOptions, setFromOptions] = useState([]);
const [toSelected, setToSelected] = useState();
const [toOptions, setToOptions] = useState([]);
//const [switchFromTo, setSwitchFromTo] = useState(true);
const switchFromToHandler = () => {
setFromOptions(toOptions);
setToOptions(fromOptions);
setFromSelected(toSelected);
setToSelected(fromSelected);
//setSwitchFromTo(!switchFromTo);
}
//useEffect(() …