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

Question

我有一个功能可以禁用下拉菜单，直到在其他两个下拉菜单中做出选择为止。我相信由于一些异步问题，它没有正确启用下拉菜单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);  }}<FormControl dense>  <TextField    id="standard-select-currency"    select    label="Home"    className={classes.textField}    value={homeSelect}    onChange={handleHome}    SelectProps={{      native: true,    }}    helperText="Please select exchange"  >    {home.map((option) => (      <option key={option.value} value={option.value}>        {option.label}      </option>    ))}  </TextField></FormControl><FormControl dense>  <TextField    id="standard-select-currency"    select    label="Hedge"    className={classes.textField}    value={hedgeSelect}    onChange={handleHedge}    SelectProps={{      native: true,    }}    helperText="Please select exchange"  >    {hedge.map((option) => (      <option key={option.value} value={option.value}>        {option.label}      </option>    ))}  </TextField></FormControl><FormControl dense>  <TextField    id="standard-select-currency"    select    label="Symbols"    className={classes.textField}    value={symbolSelect}    onChange={handleSymbol}    disabled={disabled}    SelectProps={{      native: true,    }}home下拉hedge菜单需要在启用下拉菜单之前进行选择symbol。错误是symbol下拉菜单直到之后才会启用home并且hedge被选择多次。如何更改我正在使用的方法useReducer（如果这可以解决状态更新问题）？我尝试阅读它，但不明白我的开关盒是什么。

Answer 1

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

setHomeSelect(event.target.value);

exchange_change();

当调用第二个方法时，变量homeSelect没有改变。当逻辑完成处理并且组件准备重新渲染时，它将会发生变化。

更重要的是，这不太像 React：

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 事件调用的所有逻辑都会被执行，这些逻辑会将状态更新排队。然后状态就会更新。然后组件重新渲染（如果需要）。不要依赖在该逻辑期间更新的状态。