第三个下拉菜单基于前两个下拉菜单的选择，但第三个下拉菜单的状态始终落后 1 步

Question

我有以下代码：

const [homeSelect, setHomeSelect] = useState('Home');

const [hedgeSelect, setHedgeSelect] = useState('Hedge');

const [symbolSelect, setSymbolSelect] = useState('');

const [similarSymbols, setSimilarSymbols] = useState([]);

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 = () => {

    setSimilarSymbols([]);

    //add symbols together from selected dropdowns

    var allSymbols = response.content.symbols[homeSelect] + response.content.symbols[hedgeSelect];

    console.log(allSymbols);

    //sort the symbols

    allSymbols = allSymbols.split(",");

    var sort_arr = allSymbols.sort();

    console.log(sort_arr);

    //find duplicates

    for(var i = 0; i < sort_arr.length-1; i++)

    {

      if(sort_arr[i + 1] == sort_arr[i]) { 

        setSimilarSymbols(similarSymbols => [...similarSymbols, sort_arr[i]]);

      }

    }

  }

<FormControl dense>

    <TextField

      id="standard-select-currency"

      select

      label="Home"

      className={classes.textField}

      value={homeSelect}

      onChange={handleHome}

      SelectProps={{

        native: true,

      }}

      helperText="Please select exchange"

    >

      <option>Home</option>

      {response ? response.content.exchanges.map((option) => (

        <option value={option}>

          {option}

        </option>

      )) : <option>Data is loading...</option>}

    </TextField>

  </FormControl>

  <FormControl dense>

    <TextField

      id="standard-select-currency"

      select

      label="Hedge"

      className={classes.textField}

      value={hedgeSelect}

      onChange={handleHedge}

      SelectProps={{

        native: true,

      }}

homeSelect选择和后hedgeSelect，应使用相应的数据填充“similarSymbols”。

问题是，“相似符号”直到再次选择后才会正确填充homeSelect，hedgeSelect例如，选择一个下拉列表并选择另一个下拉列表，然后再次选择其中之一。

看起来好像国家落后了一步，我不知道如何让它发挥作用。

如有任何帮助，我们将不胜感激，谢谢。

Answer 1

这是由于setState的async，也是hook造成的。调用 Exchange_change 时，状态尚未设置，并且选择了先前的值。尝试使用 useEffect 对homeSelect和所做的更改做出反应hedgeSelect：const [homeSelect, setHomeSelect] = useState('Home');const [hedgeSelect, setHedgeSelect] = useState('Hedge');const [symbolSelect, setSymbolSelect] = useState('');const [similarSymbols, setSimilarSymbols] = useState([]);const handleHome = (event) => {&nbsp; &nbsp; setHomeSelect(event.target.value);&nbsp; };const handleHedge = (event) => {&nbsp; &nbsp; setHedgeSelect(event.target.value);};const handleSymbol = (event) => {&nbsp; &nbsp; setSymbolSelect(event.target.value);};React.useEffect(exchange_change, [homeSelect, hedgeSelect]) // Here you listen to changes and update similarSymbols once changes are made.const exchange_change = () => {&nbsp; &nbsp; setSimilarSymbols([]);&nbsp; &nbsp; //add symbols together from selected dropdowns&nbsp; &nbsp; var allSymbols = response.content.symbols[homeSelect] + response.content.symbols[hedgeSelect];&nbsp; &nbsp; console.log(allSymbols);&nbsp; &nbsp; //sort the symbols&nbsp; &nbsp; allSymbols = allSymbols.split(",");&nbsp; &nbsp; var sort_arr = allSymbols.sort();&nbsp; &nbsp; console.log(sort_arr);&nbsp; &nbsp; //find duplicates&nbsp; &nbsp; for(var i = 0; i < sort_arr.length-1; i++)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; if(sort_arr[i + 1] == sort_arr[i]) {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; setSimilarSymbols(similarSymbols => [...similarSymbols, sort_arr[i]]);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }<FormControl dense>&nbsp; &nbsp; <TextField&nbsp; &nbsp; &nbsp; id="standard-select-currency"&nbsp; &nbsp; &nbsp; select&nbsp; &nbsp; &nbsp; label="Home"&nbsp; &nbsp; &nbsp; className={classes.textField}&nbsp; &nbsp; &nbsp; value={homeSelect}&nbsp; &nbsp; &nbsp; onChange={handleHome}&nbsp; &nbsp; &nbsp; SelectProps={{&nbsp; &nbsp; &nbsp; &nbsp; native: true,&nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; helperText="Please select exchange"&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; <option>Home</option>&nbsp; &nbsp; &nbsp; {response ? response.content.exchanges.map((option) => (&nbsp; &nbsp; &nbsp; &nbsp; <option value={option}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {option}&nbsp; &nbsp; &nbsp; &nbsp; </option>&nbsp; &nbsp; &nbsp; )) : <option>Data is loading...</option>}&nbsp; &nbsp; </TextField>&nbsp; </FormControl>&nbsp; <FormControl dense>&nbsp; &nbsp; <TextField&nbsp; &nbsp; &nbsp; id="standard-select-currency"&nbsp; &nbsp; &nbsp; select&nbsp; &nbsp; &nbsp; label="Hedge"&nbsp; &nbsp; &nbsp; className={classes.textField}&nbsp; &nbsp; &nbsp; value={hedgeSelect}&nbsp; &nbsp; &nbsp; onChange={handleHedge}&nbsp; &nbsp; &nbsp; SelectProps={{&nbsp; &nbsp; &nbsp; &nbsp; native: true,&nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; helperText="Please select exchange"&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; <option>Hedge</option>&nbsp; &nbsp; &nbsp; {response ? response.content.exchanges.map((option) => (&nbsp; &nbsp; &nbsp; &nbsp; <option value={option}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {option}&nbsp; &nbsp; &nbsp; &nbsp; </option>&nbsp; &nbsp; &nbsp; )) : <option>Data is loading...</option>}&nbsp; &nbsp; </TextField>&nbsp; </FormControl>&nbsp; <FormControl dense>&nbsp; &nbsp; <TextField&nbsp; &nbsp; &nbsp; id="standard-select-currency"&nbsp; &nbsp; &nbsp; select&nbsp; &nbsp; &nbsp; label="Symbols"&nbsp; &nbsp; &nbsp; className={classes.textField}&nbsp; &nbsp; &nbsp; value={symbolSelect}&nbsp; &nbsp; &nbsp; onChange={handleSymbol}&nbsp; &nbsp; &nbsp; disabled={homeSelect == 'Home' || hedgeSelect == 'Hedge'}&nbsp; &nbsp; &nbsp; SelectProps={{&nbsp; &nbsp; &nbsp; &nbsp; native: true,&nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; helperText="Please select the exchanges"&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; <option>Symbol</option>&nbsp; &nbsp; &nbsp; {console.log(similarSymbols.map((element) => (element)))}&nbsp; &nbsp; &nbsp; {response ? similarSymbols.map((option) => (&nbsp; &nbsp; &nbsp; &nbsp; <option value={option}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {option}&nbsp; &nbsp; &nbsp; &nbsp; </option>&nbsp; &nbsp; &nbsp; )) : <option>Data is loading...</option>}&nbsp; &nbsp; </TextField>&nbsp; </FormControl>