Javascript 在下拉列表中选择后，useState未正确更新

我有一个功能来禁用下拉列表，直到在另外两个下拉列表中进行了选择。我认为，由于

useState

存在一些异步问题，因此无法正确启用下拉列表

const [homeSelect, setHomeSelect] = useState('Home');
const [hedgeSelect, setHedgeSelect] = useState('Hedge');
const [symbolSelect, setSymbolSelect] = useState('1');

const handleHome = (event) => {
    setHomeSelect(event.target.value);
    exchange_change();
  };
const handleHedge = (event) => {
  setHedgeSelect(event.target.value);
  exchange_change();
};
const handleSymbol = (event) => {
  setSymbolSelect(event.target.value);
};

const exchange_change = () => {
  if (homeSelect != 'Home' && hedgeSelect != 'Hedge'){
    //enable the symbol dropdown
      setDisabled(false);
  } else {
      //disable the select exchanges dropdown
      setDisabled(true);
  }
}

{home.map（（选项）=>(
{option.label}
))}
{hedge.map（（选项）=>(
{option.label}
))}
{symbols.map（（选项）=>(
{option.label}
))}

home

和

hedge

下拉列表需要在启用

符号

下拉列表之前进行选择。错误是在多次选择

home

和

hedge

之后，才会启用

symbol

下拉列表

我如何更改使用

useReducer

的方法（如果这样可以解决状态更新问题）？我试着读了它，但不明白我的开关盒会是什么

非常感谢您的帮助。

“设置”操作是异步的。所以当你这样做的时候：

setHomeSelect(event.target.value);
exchange_change();

调用第二个方法调用时，变量

homeSelect

没有更改。当逻辑处理完毕，组件准备重新渲染时，它会发生变化

更重要的是，这不是很像：

const exchange_change = () => {
  if (homeSelect != 'Home' && hedgeSelect != 'Hedge'){
    //enable the symbol dropdown
    setDisabled(false);
  } else {
    //disable the select exchanges dropdown
    setDisabled(true);
  }
}

当您在这里修改状态值时，从概念上讲，您似乎在尝试修改UI。不要。UI组件只能响应状态。因此，您可以在“符号”组件中执行此操作，而不是使用该方法：

disabled={homeSelect == 'Home' || hedgeSelect == 'Hedge'}

如果要将其放入方法中，请将其放入由组件调用的方法中，而不是在重新渲染之前调用。例如：

disabled={() => checkSelects()}

该方法可以是：

const checkSelects = () => 
  homeSelect == 'Home' || hedgeSelect == 'Hedge';

---

但总的来说，请注意这里的操作顺序。执行UI事件调用的所有逻辑，将更新到状态。然后状态得到更新。然后组件重新渲染（如有必要）。不要依赖于逻辑期间正在更新的状态。

有道理，但很奇怪。为什么要通过

setHomeSelect（event.target.value）读取响应；交换(零钱);

并等待函数完成以更改状态？对于开发人员来说，这似乎特别令人困惑

const checkSelects = () => 
  homeSelect == 'Home' || hedgeSelect == 'Hedge';