React中useEffect内State随keydown触发延迟更新的问题排查与解决

问题描述 #

我在React组件中尝试根据输入框内容（text状态）操作DOM，代码如下：

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function App() {
  const [text, setText] = useState("Initial value");

  function handleChange(event) {
    setText(event.target.value);
  }

  useEffect(() => {
    function handleKeypress(event) {
      console.log("text", text);
      // do something with the DOM with text
    }

    document.addEventListener("keydown", handleKeypress);

    return () => {
      document.removeEventListener("keydown", handleKeypress);
    };
  }, [text]);

  return (
    <div id="keys">
      <input type="text" onChange={handleChange} value={text} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

代码可运行，但存在异常：按下按键时，console.log输出的text不是当前输入的内容，而是上一次的状态。比如第一次按下a，会输出Initial value，第二次按键才会输出a，状态更新有延迟。

注：使用全局keydown事件监听器是因为需要处理Ctrl + 按键这类不会改变输入框内容的场景。

原因分析 #

1. React状态更新的异步性：调用setText后，React不会立即更新text状态，而是将更新放入队列等待批量处理。keydown事件触发时，状态更新还未完成。
2. 闭包捕获旧值：useEffect依赖text，每次text变化时会重新创建handleKeypress函数，该函数会捕获当前的text值。但keydown事件触发时机早于useEffect重新执行的时机，第一次按键时执行的是上一轮useEffect创建的函数，捕获的是旧状态。

解决方法 #

方法一：用useRef保存最新状态 #

useRef的current属性可保存可变值，不会触发组件重渲染，能始终拿到最新状态：

import React, { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const [text, setText] = useState("Initial value");
  const textRef = useRef(text);

  // 同步状态到ref
  useEffect(() => {
    textRef.current = text;
  }, [text]);

  function handleChange(event) {
    setText(event.target.value);
  }

  useEffect(() => {
    function handleKeypress(event) {
      console.log("text", textRef.current);
      // 用textRef.current操作DOM
    }

    document.addEventListener("keydown", handleKeypress);
    return () => document.removeEventListener("keydown", handleKeypress);
  }, []); // 仅绑定一次事件

  return (
    <div id="keys">
      <input type="text" onChange={handleChange} value={text} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

方法二：直接从输入框获取最新值 #

如果仅需要输入框内容，可通过ref关联输入元素，在事件中直接读取DOM的value：

import React, { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const [text, setText] = useState("Initial value");
  const inputRef = useRef(null);

  function handleChange(event) {
    setText(event.target.value);
  }

  useEffect(() => {
    function handleKeypress(event) {
      const currentText = inputRef.current.value;
      console.log("text", currentText);
      // 用currentText操作DOM
    }

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

  return (
    <div id="keys">
      <input ref={inputRef} type="text" onChange={handleChange} value={text} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

总结 #

• 方法一更通用，适合需要依赖React状态的场景；
• 方法二更直接，适合仅需输入框内容的情况。

内容的提问来源于stack exchange，提问作者wyc