reactjs 状态是选择菜单中的一个变化

im9ewurl 于 2023-01-05 发布在 React

关注(0)|答案(3)|浏览(130)

我有一个下拉菜单，用于选择一个状态。它用于显示每个状态的不同数据。我是console.log（），每当我选择一个状态时，初始状态是“"，当我再次更改时，它似乎落后一步。例如：我的下拉菜单开始是空的，然后我选择纽约。它打印''，然后我选择缅因州，它打印纽约。我想我明白为什么会发生，但我不知道如何解决它。
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>
  );

reactjs

来源：https://stackoverflow.com/questions/61090029/state-is-one-change-behind-in-select-menu

3条答案

按热度按时间

wwtsj6pe1#

这是因为state不会立即更新，当函数被调用时，selectedState被声明，并且直到下一次调用（update）才改变。
如果你想用useEffect观察selectedState的变化，你可以这样做，或者创建一个自定义钩子来完成它：

// 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));

}

赞(0）回复(0）举报 2023-01-05

dgiusagp2#

setSelectedState是不同步的，因此当您在调用setSelectedState之后立即记录selectedState的值时，您得到的是当前值，而不是新值。

赞(0）回复(0）举报 2023-01-05

wqsoz72f3#

我也遇到过同样的问题，但我是这样解决的。

const [breakwater, setBreakwater] = useState(props.breakwater);

     useEffect( () => {
        props.handleBreakwater(breakwater); //I updated the parent component's state in useEffect
       },[breakwater]);

     const handleprimaryBwType = (e) =>{
        setBreakwater({...breakwater, primaryBwType : e.target.value});
        //props.handleBreakwater(breakwater); when i updated here a selection was updating from behind
     }

赞(0）回复(0）举报 2023-01-05

我来回答

reactjs 状态是选择菜单中的一个变化

3条答案

相关问题

热门标签

最新问答