Amazon Cognito confirmPassword调用失败：TypeError: Converting circular structure to JSON

这个TypeError: Converting circular structure to JSON报错我之前处理表单提交时也碰到过，本质就是你尝试序列化的对象里存在循环引用（比如对象A的某个属性指向对象B，对象B又反过来指向对象A），而JSON是不支持这种结构的。结合你的两步重置密码场景，大概率是调用confirmPassword()时传递的参数出了问题，下面给你一步步排查和解决的思路：

1. 锁定问题根源：传递给confirmPassword()的参数 #

你先回忆下调用这个函数时传的是什么？是不是直接把整个组件的state对象（类组件的this.state，或者函数组件里的formData状态）直接传进去了？

• 类组件里如果传this.state，有时候state会间接引用组件实例this，形成循环；
• 函数组件里如果你的formData里不小心存了DOM元素引用（比如用useRef拿到的输入框实例存在state里），或者嵌套了有循环引用的对象，也会触发这个错误。

正确的做法是只提取你需要的纯数据字段，比如安全码、新密码、确认密码，组成一个干净的对象再传进去：

// 类组件示例
handleConfirmSubmit = () => {
  const { verificationCode, password, confirmPassword } = this.state;
  // 只传需要的纯值，不要带任何组件相关的引用
  confirmPassword({
    code: verificationCode,
    newPassword: password,
    confirmPassword: confirmPassword
  });
};

// 函数组件示例
const handleConfirmSubmit = () => {
  const submitData = {
    code: formData.verificationCode,
    newPassword: formData.password,
    confirmPassword: formData.confirmPassword
  };
  confirmPassword(submitData);
};

2. 调试验证：提前测试参数是否可序列化 #

在调用confirmPassword()之前，你可以先打印并尝试序列化参数，快速定位问题：

try {
  console.log(JSON.stringify(submitData));
} catch (err) {
  console.error("参数存在循环引用：", err);
}

如果这一步就报错，那肯定是submitData里有问题，你可以逐个字段排查，看看哪个字段是循环结构的源头（比如是不是不小心把useRef的对象塞进去了，或者嵌套了用户对象里的循环引用）。

3. 检查confirmPassword()内部逻辑 #

如果参数没问题，那就要看函数内部是不是在处理数据时不小心引入了循环引用。比如如果这个函数是用来发送API请求的，是不是在请求体里加了额外的非序列化内容？比如：

// 错误示例：把组件实例或者ref对象加到请求体里
const confirmPassword = (data) => {
  return fetch('/api/reset-password', {
    method: 'POST',
    body: JSON.stringify({ ...data, component: this }) // 这里的this会导致循环引用
  });
};

这种情况只要去掉那些多余的、非数据类的属性就好。

总之，核心就是确保你要序列化的是纯JSON可兼容的数据：字符串、数字、普通对象/数组，不要包含函数、DOM元素、组件实例、Symbol这些不能被JSON序列化的类型。

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