javascript - 如何修复 HandleToggleState？

Question

我的 React 组件中有一个简单的 material-ui 切换。我想用它来切换状态(假/真)。如果我第一次使用 useState(false) 开始单击切换按钮，它会显示 false 而不是 true。

我想知道另一个 react Hook 是否可以解决这个问题。使用效果，使用回调...

const Component = () => {
  const [toggleValue, setToggleValue] = useState(false);

  const handleToggleChange = () => {
    setToggleValue(!toggleValue);
    console.log("toggle value in handle: " + toggleValue);
  };


  return(
    <FormControlLabel
       control={
          <Switch
             checked={toggleValue}
             onChange={handleToggleChange}
             value="my toggle"
          />
       }
    />
  );
};

我希望 setPreseason(!preseason); 将状态设置为与当前状态相反。从真到假，从假到真。

它可能是，但是当我在下一行记录状态时，它会记录初始状态，并且将始终记录与切换状态相反的状态。

Answer 1

useState 返回的状态更新函数是异步的

如果您需要对state 更改使用reactuseEffect是它的地方

const Component = () => {
  const [toggleValue, setToggleValue] = useState(false);

  const handleToggleValue = () => {
    setToggleValue(!toggleValue);
  };

  useEffect(() => {
    console.log("toggleValue: " + toggleValue);
      // second argument to useEffect is an array of dependencies
      // this function is going to run every time one of the dependencies
      // changes
  }, [toggleValue])

  return (
    <FormControlLabel
      control={
        <Switch
          checked={toggleValue}
          onChange={handleToggleValue}
          value="my toggle"
        />
      }
    />
  );
}