NextJS+TypeScript登录按钮点击无响应，求正确调用handleLogin方法

核心代码错误 #

你的handleLogin函数中axios.post参数传递错误，这是导致按钮无反应、接口调用失败的主要原因。axios.post的正确语法为：

axios.post(url, 请求体数据, 配置项)

你当前将headers与请求体数据放在同一个对象中作为第二个参数，导致接口无法正确解析请求参数，同时请求头也未被正确设置。

修复后的handleLogin函数 #

async function handleLogin(e: React.MouseEvent<HTMLButtonElement>) {
  // 按钮类型为button，不会触发表单默认提交，可移除e.preventDefault()
  try {
    const loginReq = await axios.post(
      "https://spda-api.onrender.com/api/auth/login",
      // 第二个参数：请求体数据
      {
        username: field.username,
        password: field.password,
      },
      // 第三个参数：配置项（包含headers）
      {
        headers: {
          "Content-Type": "application/json;charset=utf-8",
        },
      }
    );
    // loginReq.data直接是响应数据，无需额外await
    const loginResp = loginReq.data;
    if (loginReq.status === 200) {
      setAuth(loginResp);
      Cookie.set("token", loginResp.token);
      Router.push("/admin/dashboard");
    }
  } catch (error) {
    const err = error as AxiosError;
    // 优化错误日志，打印更详细的接口错误信息
    console.error("登录失败:", err.response?.data || err.message);
    setShowSnackbar(true);
  }
}

其他潜在问题排查 #

• 表单输入绑定检查：确保用户名/密码输入框正确设置name属性（需与field中的key一致），并绑定fieldHandler：

  <input
    type="text"
    name="username"
    value={field.username}
    onChange={fieldHandler}
    placeholder="用户名"
  />
  <input
    type="password"
    name="password"
    value={field.password}
    onChange={fieldHandler}
    placeholder="密码"
  />
  

  若name不匹配，field状态无法更新，会导致请求参数为空。

• 依赖项正确性检查：确认axios、js-cookie、next/router已正确安装并导入，NextJS中建议使用useRouter钩子替代直接调用Router：

  import { useRouter } from 'next/router';
  const router = useRouter();
  // 替换Router.push为router.push("/admin/dashboard");
  

• AuthContext有效性：确认AuthContext已在组件外层正确提供，setAuth函数可正常调用。

排查步骤 #

1. 添加调试日志：在handleLogin开头加入console.log("触发登录:", field)，确认函数是否被调用、field值是否正确。
2. 检查网络请求：打开浏览器开发者工具「网络」面板，查看点击登录后是否有请求发送，检查请求参数、headers、响应状态。
3. 验证接口可用性：用Postman或curl直接调用登录接口，确认接口本身是否正常工作。

内容的提问来源于stack exchange，提问作者Muhammad Yafi A