SetState(state+1) returns double amount plus one in react

Question

我正在尝试使用 React 函数组件在 keydown 上有一个数字增量 + 1 但不是增加一个（即 1,2,3,4,5）它返回它使数字加倍然后增加（即1,3,7,15,31）。我怎样才能让它做出正确的反应？

   const Display = (props) => {
      return( 
        <div id="display">{props.text}</div>
      )
    }

const App = () => {
  [displayText, setDisplayText] = React.useState(0);

  window.addEventListener('keydown',(e)=>{
     setDisplayText(displayText + 1)
  })
   
  return (

   <div class="container">
     <Display text={displayText} /> 
   </div>

  )
}

Answer 1

这里已经回答了： 在 React 中使用 addEventListener keydown 增加和减少数量

代码

export default function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const keyDownCallback = function (e) {
      switch (e.keyCode) {
        case 38:
          setCount((count) => count + 1);
          break;
        case 40:
          setCount((count) => count - 1);
          break;
      }
    };

    document.addEventListener("keydown", keyDownCallback);

    return () => document.removeEventListener("keydown", keyDownCallback);
  }, []);

  return (
    <div>
      <p>You clicked {count} times</p>
    </div>
  );
}

Answer 2

您可以从 index.js 文件中删除 react strict 模式以查看正确的结果。就这么简单。 这个错误是由于严格模式引起的。

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

Answer 3

任何时候你在 React 组件中调用 setState，它都会触发更新状态组件以及该组件的所有后续子组件的重新渲染。

在您的示例中，您将事件侦听器附加到窗口对象，并在客户端按下某个键时调用 setState。这可能会导致组件中呈现的数字与计数状态的实际值不一致。

要真正了解差异，您可以尝试控制台记录状态值并观察组件中显示的差异，以及记录到控制台的内容。

旁注：作为事件侦听器的一般经验法则，您需要清理事件侦听器，以免组件树中出现任何不需要的副作用。

这里有一篇关于 react 渲染的好文章 和往常一样，官方文档是深入研究最佳实践和行为的好地方，干杯！