Состояние - одно изменение позади в меню выбора

Question

У меня есть выпадающее меню, которое используется для выбора состояния. Он используется для отображения различных данных в каждом штате. Я - console.log (), Всякий раз, когда я go выбираю состояние, а исходным является '', и когда я снова меняюсь, это, похоже, на один шаг позади. Например: мое раскрывающееся меню начинается пустым, затем я выбираю Нью-Йорк. Это печатает '', я тогда выбираю Мэн, Это печатает Нью-Йорк. Я думаю, что понимаю, почему это происходит, но я не могу понять, как это исправить.

ProjectStatus. js

const [selectedState, setSelectedState] = useState('');

const handleChange = event => {
    setSelectedState(event.target.value);
    console.log(selectedState);
  };

return (
    <div className='project-status-nav'>
      <h3>Project Status Page</h3>
      <hr className='separator' />

      <FormControl variant='filled' className={classes.formControl}>
        <InputLabel htmlFor='selectState'>Select State</InputLabel>
        <Select
          id='selectState'
          className='selectStyle'
          value={selectedState}
          onChange={handleChange}>
          <MenuItem value={''}> </MenuItem>
          <MenuItem value={'New York'}>New York</MenuItem>
          <MenuItem value={'New Jersey'}>New Jersey</MenuItem>
          <MenuItem value={'Colorado'}>Colorado</MenuItem>
          <MenuItem value={'Florida'}>Florida</MenuItem>
          <MenuItem value={'Maine'}>Maine</MenuItem>
        </Select>
      </FormControl>
    </div>
  );

Answer 1

Это происходит потому, что состояние не обновляется сразу. Когда вызывается функция, selectedState объявляется и не изменяется до следующего вызова (обновления).

Вы можете, если хотите наблюдать изменения selectedState с useEffect, или создать пользовательский хук, чтобы сделать это следующим образом это:

// works like the React class setState, but the callback is called passing the new State
function useStateCallback(initialState) {
  const [[state, cb], setState] = useState([initialState, null]);
  useEffect(
    () => {
      cb && cb(state);
    },
    [state]
  );
  const setStateCallback = (value, callback) => setState([value, callback]);
  return [state, setStateCallback];
}


function App() {
  const [val, setVal] = useStateCallback(0);
  const increment = () =>
    setVal(val + 1, newVal => alert("Incremented: " + newVal));

}

Answer 2

setSelectedState не является синхронным, поэтому, когда вы записываете значение selectedState сразу после вызова setSelectedState, вы получаете текущее значение, а не новое. Вот почему вы всегда на один шаг позади