在下拉列表中进行选择后，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 = () => {&nbsp; if (homeSelect != 'Home' && hedgeSelect != 'Hedge'){&nbsp; &nbsp; //enable the symbol dropdown&nbsp; &nbsp; setDisabled(false);&nbsp; } else {&nbsp; &nbsp; //disable the select exchanges dropdown&nbsp; &nbsp; setDisabled(true);&nbsp; }}当您在此处修改状态值时，从概念上讲，您似乎正在尝试修改 UI。不。UI 组件只能响应状态。因此，您可以在“符号”组件中执行此操作，而不是使用该方法：disabled={homeSelect == 'Home' || hedgeSelect == 'Hedge'}如果您想将其放入方法中，请将其放入由组件调用的方法中，而不是在重新渲染之前调用。例如：disabled={() => checkSelects()}该方法可以是：const checkSelects = () =>&nbsp;&nbsp; homeSelect == 'Home' || hedgeSelect == 'Hedge';但总体而言，请注意此处的操作顺序。UI 事件调用的所有逻辑都会被执行，这些逻辑会将状态更新排队。然后状态就会更新。然后组件重新渲染（如果需要）。不要依赖在该逻辑期间更新的状态。