javascript - 如何修复HandleToggleState？

我的react组件中有一个简单的material-ui切换。我想用它来切换状态（假/真）。如果我第一次单击useState（false），则它会显示false而不是true。

我想知道是否另一个反应钩会解决这个问题。 useEffect，useCallback ...

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);将状态设置为与当前状态相反。真假相假。

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

最佳答案

state updater function返回的useState是异步的

如果您需要对state更改做出反应，请选择useEffect

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

关于javascript - 如何修复HandleToggleState？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57486908/