我的简单 reactjs 应用程序我正在调用一个动态表单，其中包含三个字段，即名称、电子邮件和消息字段。name 和 email 是文本字段，但 message 是 textarea 字段类型。此模型在 App.js 文件组件中定义。Dynamic 组件代码检查字段的类型并相应地呈现它，此代码位于下面 DynamicForm 组件的呈现部分。提交带有示例数据的表单时出现以下错误。

TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'HTMLInputElement'
    |     property '__reactInternalInstance$8fzaqcbcjir' -> object with constructor 'FiberNode'
    --- property 'stateNode' closes the circle error  

如果我删除此检查并使用输入元素显示文本字段，则此错误消失。我对 reactjs 编程相当陌生，如何删除引入的循环结构类型错误有点令人困惑。

以下代码显示了我的 App.js 文件内容

import React from 'react';
import './contact.css';

export default class DynamicForm extends React.Component {
    state = {
    }
    constructor(props) {
        super(props);
    }

    onSubmit = (e) => {
        e.preventDefault();
        if (this.props.onSubmit) this.props.onSubmit(this.state);
    }

    onChange = (e, key) => {
        this.setState({
            [key]: this[key]
        })

    }

    renderForm = () => {
        let model = this.props.model;
        let formUI = model.map((m) => {
            let key = m.key;
            let type = m.type || "text";
            let props = m.props || {};
            return (
                <div key={key} className="form-group">
                    <label className="formlabel"
                        key={"l" + m.key}
                        htmlFor={m.key}>
                        {m.label}
                    </label>
                    {type === "textarea" ? 
                      (<textarea {...props}
                      ref={(key) => {this[m.key] = key }}
                      className="form-input"
                      type={type}
                      key={"i" +m.key}
                      onChange={(e) => { this.onChange(e, key) }
                    }/>)
                    :
                      (<input {...props}
                        ref={(key) => { this[m.key] = key }}
                        className="form-input"
                        type={type}
                        key={"i" + m.key}
                        onChange={(e) => { this.onChange(e, key) }}
                      ></input>)}

                </div>
            )
        });
        return formUI;
    }

    render() {
        let title = this.props.title || "Dynamic Contact Us Form";
        return (
            <div className={this.props.className}>
                <h3>{title}</h3>
                <form className="dynamic-form" onSubmit={(e) => this.onSubmit(e)}>
                    <div className="form-group">
                        {this.renderForm()}
                        <button type="submit">Submit</button>
                    </div>


                </form>
            </div>
        )
    }
}

下面是 App.js 文件的定义：

import React, { Component } from 'react';
import './App.css';
import DynamicForm from './components/contact-us-form/DynamicForm'


class App extends Component {
  state = {
    data: [
      { id: 1, name: "a", email: "test@hotmail.com", message: "This is my message to you" },
      { id: 1, name: "b", email: "test2@hotmail.com", message: "This is my message to you" },
      { id: 1, name: "c", email: "test3@hotmail.com", message: "This is my message to you" }
    ]
  }

  onSubmit = (model) => {
    model.id = +new Date();
    this.setState({
      data: [model, ...this.state.data]
    })

  }


  render() {
    return (
      <div className="App">
        <h1>Cipherise Cloud</h1>
        <DynamicForm className="contactform"
          title="Contact us"
          model={[

            { key: "name", label: "Name", props: { required: true } },
            { key: "email", label: "E-mail", type: "email" },
            { key: "message", label: "Message", type: "textarea" }

          ]}
          onSubmit={(model) => { this.onSubmit(model) }}

        />

        <pre style={{ width: "300px" }}>

          {JSON.stringify(this.state.data)}

        </pre>
      </div>
    );
  }
}

export default App;

谁能帮我解决这个问题，因为我希望输出为 JSON 对象，如下所示

[{"id":1,
"name":"James Bond",
"email":"test@hotmail.com",
"message":"My Shoutout for help to resolve circular type error issue"}]