Question

useeffect 钩子显示了我试图在那里访问的非状态变量的旧值。在调用状态变量 set 方法之前更新非状态变量的值。我在这里做错了什么？

function Clock(){
  const [count, setCount] = React.useState(0);
  let custom = 1;
  const clickHandler = () => {
    custom = 0;
    setCount(1);
  }
  React.useEffect(()=>{
    alert(custom);
  })
  return (<div>
      <button onClick={clickHandler}>Click Me</button>
    </div>);
}

function tick() {
  ReactDOM.render(
    <Clock/>,
    document.getElementById('root')
  );
}
tick();

警报仍然打印变量 custom 的旧值为什么 useEffect 无法获取变量的最新值？

Answer 1

每次重新渲染组件时，都会创建在状态之外声明的所有变量。如果您想保留该值，您可以选择两种方式 - 将它们保持在 state 或 ref （useRef 钩子）中。规则很简单 - 如果更改会导致重新渲染 - 您的选项是 state。如果没有（例如，您想知道某个按钮被点击了多少次）- useRef 是您最好的朋友。

<fixtext fixref="F-22407r554595_fix">Configure the policy value for Computer Configuration &gt;&gt;
                Administrative Templates &gt;&gt; Windows Components &gt;&gt; BitLocker Drive Encryption &gt;&gt;
                Operating System Drives "Require additional authentication at startup" to "Enabled" with "Configure TPM
                Startup PIN:" set to "Require startup PIN with TPM" or with "Configure TPM startup key and PIN:" set to
                "Require startup key and PIN with TPM".
</fixtext>

Answer 2

您的 useEffect 需要了解 count 何时发生变化。
您的点击处理程序只是将状态设置为 1。
您不会对 custom 变量执行任何操作。

const { useState, useEffect } = React;

function Clock(){

  const [count, setCount] = React.useState(0);

  // Increment the count state
  function clickHandler() {
    const newState = count === 1 ? 0 : 1;
    setCount(newState);
  }

  // The effect checks to see if `count` has changed
  // and logs (alerts) it
  useEffect(() => {
    console.log(count);
  }, [count]);

  return (
    <div>
      <button onClick={clickHandler}>Click Me</button>
    </div>
  );

}

// Render it
ReactDOM.render(
  <Clock />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

React：useEffect 中更新的非状态变量显示旧值

2 个答案: