useImperativeHandle传递useRef数据延迟问题求助

问题根源 #

你的问题出在 Input 组件的 useImperativeHandle 实现逻辑上：

• 你直接将当前输入值的快照作为暴露对象的 value 属性返回，并且把 getValue() 的结果放进了依赖数组。
• 输入框内容变化时，Input 组件不会重新渲染（因为你没使用 useState 跟踪输入值），导致 useImperativeHandle 不会重新执行，暴露的 value 始终是旧的快照。
• 而 Login 组件只有在 isValid 状态变化时才会重新渲染，所以组件渲染时读取的 emailInputRef.current?.value 永远是上次渲染时的旧值。

解决方案：暴露获取值的方法而非快照 #

不要直接存储输入值的快照，改为暴露一个实时获取当前值的方法，这样需要使用值时，调用方法就能拿到 inputRef 中的最新内容，同时完全避免不必要的组件重渲染。

修改后的 Input 组件代码

const Input = forwardRef((props, ref) => {
  const inputRef = useRef();

  // 实时获取当前输入值的方法
  const getValue = () => {
    return inputRef.current?.value;
  };

  const clear = () => {
    if (inputRef.current) {
      inputRef.current.value = "";
    }
  };

  useImperativeHandle(
    ref,
    () => {
      return {
        getValue, // 暴露方法而非静态值
        clear,
      };
    },
    [] // 依赖数组为空，因为 getValue 和 clear 是稳定的引用
  );

  return (
    <div className={styles["input-container"]}>
      <input
        ref={inputRef}
        name={props.name}
        type={props.type}
        className={styles.input}
        onChange={props.onChange}
        required
      />
      <label className={styles.label}>{props.placeholder}</label>
    </div>
  );
});

修改后的 Login 组件提交逻辑

在需要使用输入值的时机（比如表单提交时）调用方法获取最新值，而不是在组件渲染时读取静态快照：

const submitHandler = async (event) => {
  event.preventDefault();

  // 实时获取最新输入值
  const email = emailInputRef.current?.getValue();
  const password = passwordInputRef.current?.getValue();
  console.log("最新输入值: ", email, password);

  setIsValid((prevState) => !prevState);

  // return router.push("/dashboard");
};

原理说明 #

• 暴露方法后，每次调用 getValue() 都会直接读取 inputRef.current.value 的最新状态，完全消除了值延迟的问题。
• 全程没有使用 useState 跟踪输入值，不会因为输入内容变化触发任何组件重渲染，符合你的性能需求。

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