useReducer值在handleSubmit函数中打印不更新的问题

在登录/注册表单中使用useReducer管理状态时，提交相关函数（如signup）里打印state始终返回默认值{email: ''}，但在依赖state的useEffect中却能正确显示输入的实际值。

这是闭包陷阱导致的：

• 组件初始渲染时，scriptLoadReCAPTCHA函数调用window.grecaptcha.render，把当时的signup函数作为callback传入。
• 这个signup函数捕获的是初始渲染时的state（默认值），后续用户输入触发dispatch更新state时，组件会重新生成新的signup函数，但已注册到recaptcha的旧signup函数依然持有旧的state引用，所以打印的是默认值。
• 而useEffect依赖state，每次state更新都会重新执行，因此能拿到最新的state。

最简单的解决方式是用useRef保存最新的state，因为ref的current属性是可变的，不受闭包捕获的限制：

步骤1：添加useRef保存最新状态 #

在组件中定义stateRef，并在state更新时同步：

import { useRef, useEffect } from 'react';

// ... 其他代码

// 建议初始state加上name字段，避免undefined，让类型更严谨
const [state, dispatch] = useReducer(reducer, { email: "", name: "" }); 
const stateRef = useRef(state);

useEffect(() => {
  // 每次state更新时，同步到ref
  stateRef.current = state;
}, [state]);

步骤2：在signup函数中使用ref.current获取最新状态 #

修改signup函数，从stateRef.current读取最新值：

function signup(token: string) {
  const currentState = stateRef.current;
  console.log(currentState); // 现在能拿到最新的输入值
  fetch("/api/login/signup", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      recaptcha: token,
    },
    body: JSON.stringify(currentState),
  })
    .then((res) => res.json())
    .then(console.log);
}

其他可选方案 #

1. 重新绑定recaptcha callback：在state更新时重新调用window.grecaptcha.render替换callback，但这种方式会重复渲染recaptcha，效率较低。
2. 使用useCallback包裹signup：给signup加上useCallback并依赖state，同时在state变化时重新初始化recaptcha，但需要处理recaptcha的重新渲染逻辑，复杂度较高。

• 把registerElements的生成逻辑放在useMemo中，依赖state，避免每次渲染都重新创建数组：

const registerElements = useMemo(() => [
  {
    type: "text",
    name: "name",
    placeholder: "name",
    onChange: (e) => dispatch({ type: "SET_NAME", payload: e.target.value }),
    value: state.name,
  },
  {
    type: "email",
    name: "email",
    placeholder: "email",
    onChange: (e) => dispatch({ type: "SET_EMAIL", payload: e.target.value }),
    value: state.email,
  },
], [state]);

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