使用React Hooks如何等待onChange完成setValue后在keydown中取最新值

问题原因 #

• React的setValue是异步批处理的，调用后不会立刻修改当前作用域下的value变量，只会在下一次组件重渲染时生成新的value值
• 你当前定义的handleKeyDown已经在本次渲染的闭包里捕获了旧的value，不管延迟多久执行，拿到的永远是本次渲染的旧值，和handleChange有没有执行完setValue没有关系

解决方法 #

方法1：直接使用e.target.value获取最新值 #

如果只是需要输入框的最新值，不需要额外绕弯获取state，直接在handleKeyDown里取e.target.value即可，这是成本最低的方案：

const handleKeyDown = (e) => {
  console.log("最新输入值：", e.target.value);
};

方法2：用useEffect监听value变化触发后续逻辑 #

如果你必须要在state更新完成后才执行逻辑，可以把需要在按键后执行的逻辑放到useEffect中，监听value的变化，同时配合一个标记位确认是按键触发的更新：

import "./styles.css";
import { useState, useEffect, useRef } from "react";

export default function App() {
  const [value, setValue] = useState("");
  // 标记是否是按键触发的更新
  const isKeyDownTriggered = useRef(false);

  const handleChange = (e) => {
    console.log("called handle changed");
    setValue(e.target.value);
  };

  const handleKeyDown = (e) => {
    console.log("called keydown");
    isKeyDownTriggered.current = true;
  };

  // state更新完成后执行逻辑
  useEffect(() => {
    if (isKeyDownTriggered.current) {
      console.log("最新的state value：", value);
      // 这里写你需要执行的后续逻辑
      isKeyDownTriggered.current = false;
    }
  }, [value]);

  return (
    <div className="App">
      <input
        value={value}
        onChange={handleChange}
        onKeyDown={handleKeyDown}
      />
    </div>
  );
}

方法3：用函数式更新获取最新值（仅适用于需要基于最新值修改state的场景） #

如果你的逻辑是要基于最新的value修改state，可以用setValue的函数式参数，回调里拿到的永远是最新的state值：

const handleKeyDown = () => {
  setValue(prevValue => {
    console.log("最新的state value：", prevValue);
    // 基于prevValue做计算后返回新值即可
    return prevValue;
  })
};

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