为什么即使状态发生变化，反应也不会显示更新的值？

Question

我正在尝试使用 ReactJS 并遇到了一个问题。我只想根据 BootstrapSwitchButton 的值更新一个变量。经过一段时间的调试，我得出的结论是变量正在根据需要更新，但没有显示在反应渲染部分中，而是显示了函数的更新值。我的代码是：

  const [state, setState] = useState(false);
  let btnValue;
  
  function changeValue(value)
  {
    console.log("Value: " + value)
    btnValue = value;
    setState(value); 
    console.log("Button Value at function: " + btnValue)
  }
  return (
    <div className="App">
      <BootstrapSwitchButton checked={true} onlabel="On" offlabel="Off" width={100} onChange={changeValue}/>
    {console.log("Button Value: " + btnValue)}
    </div>
  );
}

我只想知道这里发生了什么？为什么即使状态发生变化，React 也不会显示更新的值？

Answer 1

您不应在组件上下文中使用局部变量，因为它们不在状态生命周期内。 React 不知道这个变量，因此不会“跟踪”它。使用 state 而不是 btnValue，因为这样 React 将处理与组件更改相关的任何操作。您可以在 React state and lifecycle page.

中阅读更多相关信息

function changeValue(value)
  {
    console.log("Value: " + value)
    setState(value); 
    console.log("Button Value at function: " + value)
  }
return (
    <div className="App">
      <BootstrapSwitchButton checked={true} onlabel="On" offlabel="Off" width={100} onChange={changeValue}/>
    {console.log("Button Value: " + state)}
    </div>
  );

为什么即使状态发生变化，反应也不会显示更新的值？

Why react does not show updated value even if state changes?

variables

setstate

reactjs

react-bootstrap