React动态表单提交报错：TypeError: Converting circular structure to JSON

嘿，刚碰到过几乎一模一样的坑！让我帮你把这个问题捋清楚——你遇到的TypeError: Converting circular structure to JSON，本质是你在序列化表单数据的时候，不小心把**整个DOM元素（比如textarea的HTML元素对象）**塞进了要转JSON的对象里，而DOM元素本身自带循环引用（比如它的parentNode会指向父元素，父元素又可能关联回它，形成闭环），JSON.stringify根本处理不了这种结构。

为什么只用input的时候没报错？大概率是你收集input数据时巧合取到了value属性，但处理textarea时误拿了元素本身，或者textarea的DOM结构里循环引用更明显触发了错误。

核心解决方案：只收集输入框的value，别碰DOM元素本身 #

我给你两种靠谱的处理方式，从简单到规范：

方式1：直接获取DOM元素的value（适合快速调试）

如果你的提交逻辑是直接操作DOM拿值，一定要确保取的是元素的value属性，而不是元素本身：

// 错误写法（会报错）
const handleSubmit = (e) => {
  e.preventDefault();
  const formData = {
    name: document.getElementById('name'), // 拿的是DOM元素，不是value！
    email: document.getElementById('email'),
    message: document.getElementById('message') // textarea元素自带循环引用
  };
  JSON.stringify(formData); // 直接炸锅
};

// 正确写法
const handleSubmit = (e) => {
  e.preventDefault();
  const formData = {
    name: document.getElementById('name').value,
    email: document.getElementById('email').value,
    message: document.getElementById('message').value // 只取value！
  };
  // 转成你想要的数组格式
  const finalData = [{id: 1, ...formData}];
  console.log(JSON.stringify(finalData)); // 完美生成目标JSON
};

方式2：用React受控组件（推荐的规范写法）

React里更优雅的方式是用state管理表单状态，让每个输入框都和state绑定，提交时直接用state里的纯字符串数据，完全不用碰DOM：

首先在App.js里定义表单状态和回调：

import { useState } from 'react';
import DynamicForm from './DynamicForm';

function App() {
  // 初始化表单状态，和字段一一对应
  const [formState, setFormState] = useState({
    name: '',
    email: '',
    message: ''
  });

  // 统一处理输入变化
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormState(prevState => ({ ...prevState, [name]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 直接用state里的纯数据，完全没有DOM元素
    const finalData = [{ id: 1, ...formState }];
    console.log(JSON.stringify(finalData)); // 正常序列化
  };

  // 定义表单字段配置，传给DynamicForm组件
  const formFields = [
    { name: 'name', type: 'text', label: 'Name' },
    { name: 'email', type: 'email', label: 'Email' },
    { name: 'message', type: 'textarea', label: 'Message' }
  ];

  return (
    <form onSubmit={handleSubmit}>
      <DynamicForm 
        fields={formFields} 
        formState={formState} 
        onChange={handleInputChange} 
      />
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

然后修改DynamicForm组件，让它渲染受控的输入控件：

function DynamicForm({ fields, formState, onChange }) {
  return (
    <>
      {fields.map(field => (
        <div key={field.name} style={{ marginBottom: '1rem' }}>
          <label htmlFor={field.name}>{field.label}:</label>
          {field.type === 'textarea' ? (
            <textarea
              id={field.name}
              name={field.name}
              value={formState[field.name]}
              onChange={onChange}
              rows="4"
              style={{ width: '100%' }}
            />
          ) : (
            <input
              id={field.name}
              type={field.type}
              name={field.name}
              value={formState[field.name]}
              onChange={onChange}
              style={{ width: '100%', padding: '0.5rem' }}
            />
          )}
        </div>
      ))}
    </>
  );
}

export default DynamicForm;

为什么这样能解决问题？ #

因为受控组件模式下，我们始终操作的是纯字符串类型的state值，完全没有涉及DOM元素对象，自然不会出现循环引用的问题。而且这种方式也更符合React的状态管理理念，后续要加表单验证、字段联动也会更方便。

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