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

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