Javascript 如何修复HandleToggleState？

我的react组件中有一个简单的材质ui切换。我想用它来切换状态（false/true）。如果我第一次单击切换时以useState（false）开头，它会显示false而不是true

我想知道另一个react钩子是否能解决这个问题。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"
          />
       }
    />
  );
};

const组件=（）=>{
const[toggleValue，setToggleValue]=useState（false）；
常量handleToggleChange=（）=>{
setToggleValue（！toggleValue）；
log（“句柄中的切换值：”+toggleValue）；
};
返回(
);
};

我希望

setPreseason（！preseason）

设置与当前状态相反的状态。真对假，假对真

---

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

您做得很正确，只是

toggleValue

只是一个局部变量，不只是通过调用

setToggleValue

（状态将被更改，但这是异步发生的）

您可以这样做：

consthandletogglevalue=（）=>{
常量newToggleValue=！toggleValue；
setToggleValue（newToggleValue）；
log（'toggleValue:'+newToggleValue）；
}

---

这取决于您对新切换值的意图。这只是修复了您对console.log调用所做的操作。但是，鉴于您在更新状态之前使用了新的切换值，因此在此之后您可能会遇到进一步的问题。但这是另一个SO问题…

由返回的

状态更新程序函数

是异步的

如果你需要对

状态做出反应

更改就是它的位置

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

const组件=（）=>{
const[toggleValue，setToggleValue]=useState（false）；
常量handleToggleValue=（）=>{
setToggleValue（！toggleValue）；
};
useffect（（）=>{
log（“toggleValue:+toggleValue”）；
//useEffect的第二个参数是依赖项数组
//此函数将在每次运行一个依赖项时运行
//变化
}，[toggleValue]）
返回(
);
}

问题在于哪个值

toggleValue

在闭包中。这不是您所期望的。而是将回调传递给

setToggleValue

。您将返回当前状态，然后可以更改该状态

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

---

这是因为状态更新程序是异步的。我如何修复它？useEffect或useCallback钩子会工作吗？如果是的话，代码会是什么样子？这对我不起作用。它仍然记录初始值。你把控制台日志语句放在回调函数外，放在呈现函数内，是吗？你能共享更多代码吗？我目前没有一个回调，不知道如何格式化。我试图简化我正在共享的代码，但可以给你更多-我应该如何与你共享？将它添加到原始问题中；代码应该可以正常工作，错误是其他的。我以前在网上看到过类似的示例，但不明白它如何适合我当前的代码。设置在哪里gleValue设置以及如何使用handleToggleValue？@sbaden更新了我对您的组件的回答，在

handleToggleValue

中，您只需更新

状态

，在

useEffect

中，您提供了一个函数，每次

toggleValue

更改时都可以运行。我更改了我的代码，以反映您在上面所做的更改结果不一样。useEffect是如何改变任何东西的？@sbaden它是如何改变的？它首先在组件装载时记录

false

，然后在每个

状态上记录相反的更改我更新了你的沙盒，添加了一个额外的控制台日志来演示我的意思。这对我不起作用。它仍然记录初始值。哟使用useEffect示例可能会更好；但下面是一个示例来说明这是如何工作的（不确定您做了哪些不同的操作，但当您切换它时，控制台会记录当前复选框状态）。