Как исправить ошибку TypeError: Преобразование круговой структуры в JSON в моей простой программе «FORM DATA»

Question

Мое простое приложение activjs. Я называю динамическую форму, которая содержит три поля: имя, адрес электронной почты и поле сообщения.name и email являются текстовыми полями, но сообщение имеет тип поля 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  

Если я уберу эту проверку и выведу текстовое поле, используя элемент ввода, эта ошибка исчезнет.Я довольно новичок в программировании реагировать и немного сбиваю с толку, как устранить введенную ошибку типа круговой структуры.

Следующий код показывает содержимое моего файла 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:

<code>

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)}

        

);}} экспортировать приложение по умолчанию;

Может ли кто-нибудь помочь мне разобраться с этой проблемой, поскольку я ожидаю вывод в виде объекта JSON, как показано ниже

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