第三个下拉菜单基于前两个下拉菜单的选择，但第三个下拉菜单的状态始终落后 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) => {

    setHomeSelect(event.target.value);

  };

const handleHedge = (event) => {

    setHedgeSelect(event.target.value);

};

const handleSymbol = (event) => {

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

    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,

      }}

      helperText="Please select exchange"

    >

      <option>Hedge</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="Symbols"

      className={classes.textField}

      value={symbolSelect}

      onChange={handleSymbol}

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

      SelectProps={{

        native: true,

      }}

      helperText="Please select the exchanges"

    >

      <option>Symbol</option>

      {console.log(similarSymbols.map((element) => (element)))}

      {response ? similarSymbols.map((option) => (

        <option value={option}>

          {option}

        </option>

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

    </TextField>

  </FormControl>