Next.js+Axios请求报错：循环结构无法转为JSON问题求助

这个报错的核心原因是你在onChange事件中，把**整个HTML输入元素对象（e.target）**存入了username和password状态，而不是输入框的实际文本值。

HTMLInputElement是一个复杂的DOM对象，内部包含循环引用（比如元素与父DOM节点的关联），当Axios尝试将包含该对象的credentials序列化为JSON时，JSON.stringify无法处理这种循环结构，就会抛出你看到的错误。

修复步骤： #

把onChange中的状态更新逻辑，从赋值e.target改为赋值e.target.value，也就是输入框的实际内容：

import React, {useState} from 'react'
import axios from 'axios'

export default function Home() {

  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")

  const handleSubmit = async (e) => {
    e.preventDefault()
    const credentials ={username: username, password: password}

    try {
      const user = await axios.post('/api/auth/login', credentials);
      // 这里可以添加登录成功后的逻辑，比如跳转、存储token等
    } catch (err) {
      // 处理请求失败的情况，比如提示错误
      console.error(err)
    }
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        
        <label htmlFor='username'>Username</label>
        {/* 改动：将e.target改为e.target.value */}
        <input type="text" name="username" id="username" onChange={e=> setUsername(e.target.value)} />

        <label htmlFor='password'>Password</label>
        {/* 改动：将e.target改为e.target.value */}
        <input type="password" name="password" id="password" onChange={e=> setPassword(e.target.value)} />

        <button>Login</button>
      </form>
    </div>
  )
}

额外优化建议： #

• 简化表单提交绑定，直接写onSubmit={handleSubmit}即可，无需额外包裹箭头函数。
• 给axios.post添加try/catch捕获请求异常，方便排查后续可能出现的网络或后端错误。

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