console.log 没有正确显示 React 状态 [重复]答案

【问题标题】：console.log doesn't show React state correctly [duplicate]console.log 没有正确显示 React 状态 [重复]
【发布时间】：2021-11-10 03:18:03
【问题描述】：

我正在做一个需要封装用户输入的字母的项目

const { useState, useEffect } = React;

function App() {
  const [usedLetter,setUsedLetter] = useState([])
  
  useEffect(()=>{
    window.addEventListener('keydown', handleKeydown);
    return () => {
      window.removeEventListener('keydown',handleKeydown);
    }
  },[])

  function handleKeydown(event){
    const letter = event.key;
    setUsedLetter(usedLetter => [...usedLetter,letter])
    console.log(usedLetter);
  }

  return (
    <div className="App">
      <p>Used letter : {usedLetter}</p>
    </div>
  );
}

ReactDOM.render(<App />, document.body);

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

这段代码产生了一个奇怪的行为。当我从反应开发者工具监控状态时，一切正常。结果在浏览器上显示正常。但是当涉及到控制台时，特别是console.log(usedLetter); 存储在usedLetter 中的值即使在我击中了多个字符之后也什么都不是。我曾尝试通过useEffect 访问usedLetter，它可以工作，但很不方便，因为我不得不中断流程并在事件侦听器回调之外访问它

谁能告诉我为什么会发生这种情况以及我如何才能在事件侦听器回调中获得真正的usedLetter（浏览器上的一个节目）？

谢谢一百万

【问题讨论】：

状态保证在整个渲染周期内保持稳定（除非发生突变），因此更新的状态值在下一个周期之前不可用（因此您的 console.log 反映了未更新的状态） .这回答了你的问题了吗？ useState set method not reflecting change immediately
是的，我预计 console.log 比 usedLetter 持有的实际值落后 1 步。但现实情况是，console 引用的 usedLetter 一直没有任何内容。我认为这与您的链接建议的关闭更相关。
是的，我没有仔细阅读你的 sn-p。这绝对是由于仅在第一次安装时才添加侦听器而导致的关闭问题。（处理程序是在每次渲染时声明的，所以不会遇到这个问题，但是监听器已经在它上面形成了一个闭包，就像在第一次安装时声明的那样）。最干净的解决方案就是将usedLetter 添加到useEffect 的依赖数组中。 useEffect(() => {...}, [usedLetter]);
Tks 老兄，它就像我预期的那样工作 :)

标签： javascript reactjs

【解决方案1】：

useState 只设置它本质上异步执行的新状态。有一个名为 react-usestateref 的 npm 包

查看此代码框： https://codesandbox.io/s/sharp-bardeen-1gyo3?file=/src/App.js

我使用此处接受的答案来弄清楚： React hooks: accessing up-to-date state from within a callback

【讨论】：

Tks 老兄，工作就像一个魅力，但是这个库被广泛使用吗？我只是 reactJS 的菜鸟，我认为过早使用第三方库可能会破坏我的反应学习过程 :(.
这是一个公平的说法。我改编了该 SO 中接受的答案以满足您的需要。签出此代码沙箱codesandbox.io/s/zen-murdock-fo01f?file=/src/App.js 我在代码中添加了一些 cmets 以使其正常工作。