为什么 console.log() 多次打印所有以前的值？

如何解决为什么 console.log() 多次打印所有以前的值？

当我单击加号按钮时，数字状态按预期更新为 +1。但是如果我点击加号按钮 5 次（或任何其他次数）。当我尝试使用 keydown 事件在控制台中打印数字值时，我得到了五次 0 到 5 的打印（或者与我之前单击加号按钮的次数一样多）。为什么会这样？我怎样才能用当前（更新）的值只打印一张？

This is the screenshot

let [number,setNumber] = useState(0)

function plus() {setNumber(number += 1)}

function ptintNumber() {
    console.log(number)
}

document.addEventListener('keydown',ptintNumber)

return <div>
    <h1>{number}</h1>
    <button onClick={plus}>+</button>
</div>

解决方法

回答您的具体问题：发生这种情况的原因是您在每次渲染时都绑定了一个侦听文档的事件，每次单击加号按钮时都会发生这种情况。因此，每次按键都会调用 ptintNumber 的次数与您点击加号按钮的次数相同。

解决方案：像这样将您的偶数侦听器放入 useEffect 中：

import React from "react";
import "./styles.css";

export default function App() {
  let [number,setNumber] = React.useState(0);
  const number_ref = React.useRef();
  number_ref.current = number;

  function plus() {
    setNumber((number += 1));
  }

  function ptintNumber() {
    console.log(number_ref.current);
  }

  React.useEffect(() => {
    document.addEventListener("keydown",ptintNumber);
  },[]);

  return (
    <div className="App">
      <h1>{number}</h1>
      <button onClick={plus}>+</button>
    </div>
  );
}

沙盒：https://codesandbox.io/s/wizardly-antonelli-vix6q?file=/src/App.js

您可以使用 onKeyDown 而不是 addEventListener

function ButtonComp() {
    let [number,setNumber] = useState(0);
    // document.addEventListener("keydown",ptintNumber);

    return (
        <div>
            <h1>{number}</h1>
            <button onClick={() => setNumber(number+1)} onKeyDown={() => {console.log(number)}}>+</button>
        </div>
    );
}

如果你想看到这个值，你需要使用一个 useEffect 钩子来响应数字的变化。您可能用您的方法输出的值可能不是正确的值

import React,{ useEffect,useState } from "react";

export default function App() {
  let [number,setNumber] = useState(0);
  function plus() {
    setNumber((previousNumber) => previousNumber + 1);
  }

  useEffect(() => {
    console.log(number);
  },[number]);

  return (
    <div className="App">
      <h1>{number}</h1>
      <button onClick={plus}>+</button>
    </div>
  );
}

您还应该将新值建立在前一个值的基础上

Codesandbox example