Сборка React - «Объекты недопустимы как дочерние элементы React»

Question

Я работаю над проектом Expressjs для обслуживания сборки React (с npm run build).Всякий раз, когда я работаю над проектом React, он прекрасно работает.Я получаю сообщение об ошибке, когда я собираю проект и обслуживаю его с помощью express.static('build').

. У меня есть форма контакта, когда я нажимаю Отправить , страница становится пустой и отображается ошибкаконсоль инструментов разработчика:

Инвариантное нарушение: "ошибка Minified React # 31; посетите https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Bname%2C%20data%2C%20stage%7D&args[]= для полного сообщения или используйте неминифицированную среду dev для получения полных ошибок и дополнительных полезных предупреждений. "

На этой странице я получаю разобранную ошибку:

Объект недопустим как дочерний элемент React (найдено: объект с ключами {name, data, stage})

У меня есть компонент Contacto.js, где:

import React, { Component } from "react";
import ReCAPTCHA from "react-google-recaptcha";
import "./Contacto.css";

const Validator = require("validator");
const queryString = require("query-string");

const errores = {
  nombre: {
    vacio: "El nombre es obligatorio"
  },
  apellido: {
    vacio: "El apellido es obligatorio"
  },
  email: {
    vacio: "El correo electrónico es obligatorio",
    invalido: "El correo electrónico es inválido"
  },
  telefono: {
    vacio: "El teléfono es obligatorio"
  },
  asunto: {
    vacio: "El asunto es obligatorio"
  },
  mensaje: {
    vacio: "El mensaje es obligatorio"
  },
  captcha: "El captcha es obligatorio"
};

class Contacto extends Component {
  constructor(props) {
    super(props);

    this.state = {
      error: false,
      texto: {},
      alert: {
        tipo: ""
      },
      captcha: "",
      captchaSiteKey: "<captcha key>",
      captchaTestSiteKey: "<captcha test key>"
    };
    this.checkField = this.checkField.bind(this);
    this.enviarCorreo = this.enviarCorreo.bind(this);
    this.setCaptcha = this.setCaptcha.bind(this);
  }

  checkField(e) {
    let errors = { ...this.state.texto };

    if (Validator.isEmpty(e.target.value)) {
      if (typeof errores[e.target.id].vacio != "undefined") {
        errors[e.target.id] = <p>{errores[e.target.id].vacio}</p>;
      } else {
        errors[e.target.id] = <p>{errores[e.target.id]}</p>;
      }
    } else {
      delete errors[e.target.id];
    }

    if (Object.keys(errors).length < 1) {
      this.setState(
        Object.assign(this.state, {
          error: false
        })
      );
    }

    this.setState(Object.assign(this.state, { texto: errors }));
  }

  enviarCorreo(evt) {
    evt.preventDefault();

    const data = {
      nombre: evt.target.elements.nombre.value,
      apellido: evt.target.elements.apellido.value,
      email: evt.target.elements.email.value,
      telefono: evt.target.elements.telefono.value,
      asunto: evt.target.elements.asunto.value,
      mensaje: evt.target.elements.mensaje.value
    };

    let errors = {};

    if (Validator.isEmpty(data.nombre)) {
      this.setState(Object.assign(this.state, { error: true }));
      errors.nombre = <p>{errores.nombre.vacio}</p>;
    }

    if (Validator.isEmpty(data.apellido)) {
      this.setState(Object.assign(this.state, { error: true }));
      errors.apellido = <p>{errores.apellido.vacio}</p>;
    }

    if (Validator.isEmpty(data.email)) {
      this.setState(Object.assign(this.state, { error: true }));
      errors.email = <p>{errores.email.vacio}</p>;
    } else if (!Validator.isEmail(data.email)) {
      this.setState(Object.assign(this.state, { error: true }));
      errors.email = <p>{errores.email.invalido}</p>;
    }

    if (Validator.isEmpty(data.telefono)) {
      this.setState(Object.assign(this.state, { error: true }));
      errors.telefono = <p>{errores.telefono.vacio}</p>;
    }

    if (Validator.isEmpty(data.asunto)) {
      this.setState(Object.assign(this.state, { error: true }));
      errors.asunto = <p>{errores.asunto.vacio}</p>;
    }

    if (Validator.isEmpty(data.mensaje)) {
      this.setState(Object.assign(this.state, { error: true }));
      errors.mensaje = <p>{errores.mensaje.vacio}</p>;
    }

    if (!this.state.captcha.length) {
      this.setState(Object.assign(this.state, { error: true }));
      errors.captcha = <p>{errores.captcha}</p>;
    }

    if (this.state.error) {
      this.setState(
        Object.assign(this.state, {
          texto: errors,
          error: false,
          alert: {
            tipo: "alert-danger"
          }
        })
      );
    } else {
      this.setState(
        Object.assign(this.state, {
          error: false
        })
      );

      const options = {
        method: "POST",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        body: queryString.stringify(data)
      };
// If I remove the following block of code, the error is not being displayed.
      (async () => {
        let response = await fetch(
          `${window.location.origin}/contacto`,
          options
        );
        let data = await response.json();

        if (!data.success) {
          this.setState({
            error: true,
            texto: { error: <p>{data.message}</p> },
            alert: {
              tipo: "alert-danger"
            }
          });
        } else {
          this.setState({
            error: false,
            texto: { error: <p>{data.message}</p> },
            alert: {
              tipo: "alert-success"
            }
          });
          document.getElementById("formulario-contacto").reset();
        }
      })();
    }
  }

  setCaptcha(value) {
    const mensajes = this.state.texto;
    if (!!this.state.texto.captcha && value.length) {
      delete mensajes.captcha;
    } else {
      mensajes.captcha = "El captcha es obligatorio";
    }
    this.setState(
      Object.assign(this.state, {
        captcha: value,
        texto: mensajes
      })
    );
  }

  render() {
    return (
      <section id='contacto'>
        <div
          className={`alert ${this.state.alert.tipo}`}
          style={{
            display: !!Object.keys(this.state.texto).length ? "block" : "none"
          }}
        >
          {Object.keys(this.state.texto).map(key => this.state.texto[key])}
        </div>
        <div className='container'>
          <div className='row'>
            <div className='col-xs-12 col-md-6'>
              <div className='formulario-contacto'>
                <form onSubmit={this.enviarCorreo} id='formulario-contacto'>
                  {/* Nombre */}
                  <div className='form-group'>
                    <div className='input-group'>
                      <span className='input-group-addon' />
                      <input
                        type='text'
                        className='form-control'
                        id='nombre'
                        aria-describedby='Nombre'
                        placeholder='Nombre'
                        onChange={this.checkField}
                      />
                    </div>
                    {/* /form-group */}
                  </div>
                  {/* /Nombre */}

                  {/* Apellido */}
                  <div className='form-group'>
                    <div className='input-group'>
                      <span className='input-group-addon' />
                      <input
                        type='text'
                        className='form-control'
                        id='apellido'
                        aria-describedby='Apellido'
                        placeholder='Apellido'
                        onChange={this.checkField}
                      />
                    </div>
                    {/* /form-group */}
                  </div>
                  {/* /Apellido */}

                  {/* Email */}
                  <div className='form-group'>
                    <div className='input-group'>
                      <span className='input-group-addon' />
                      <input
                        type='email'
                        className='form-control'
                        id='email'
                        aria-describedby='Email'
                        placeholder='Email'
                        onChange={this.checkField}
                      />
                    </div>
                    {/* /form-group */}
                  </div>
                  {/* /Email */}

                  {/* Telefono */}
                  <div className='form-group'>
                    <div className='input-group'>
                      <span className='input-group-addon' />
                      <input
                        type='tel'
                        className='form-control'
                        id='telefono'
                        aria-describedby='Telefono'
                        placeholder='Telefono'
                        onChange={this.checkField}
                      />
                    </div>
                    {/* /form-group */}
                  </div>
                  {/* /Telefono */}

                  {/* Asunto */}
                  <div className='form-group'>
                    <div className='input-group'>
                      <span className='input-group-addon' />
                      <input
                        type='text'
                        className='form-control'
                        id='asunto'
                        aria-describedby='Asunto'
                        placeholder='Asunto'
                        onChange={this.checkField}
                      />
                    </div>
                    {/* /form-group */}
                  </div>
                  {/* /Asunto */}

                  {/* Mensaje */}
                  <div className='form-group'>
                    <div className='input-group'>
                      <span className='input-group-addon' />
                      <textarea
                        className='form-control'
                        id='mensaje'
                        rows='3'
                        placeholder='Escribe aqui tu consulta...'
                        onChange={this.checkField}
                      />
                    </div>
                    {/* /form-group */}
                  </div>
                  {/* /Mensaje */}

                  <div className='col-xs-12 col-md-6'>
                    <ReCAPTCHA
                      sitekey={this.state.captchaSiteKey}
                      onChange={this.setCaptcha}
                    />
                  </div>

                  {/* Boton Enviar */}
                  <div className='form-group'>
                    <button
                      type='submit'
                      className='btn btn-primary btn-lg btn-block'
                    >
                      Send
                    </button>
                  </div>
                  {/* /form-group */}
                </form>
                {/* /Formulario  */}
              </div>
              {/* /Formulario Contacto */}
            </div>
          </div>
          {/* /row */}
        </div>
        {/* /container */}
      </section>
    );
  }
}

export default Contacto;

Примечание. Ошибки хорошо отображаются в разделе предупреждений.

Я читал несколько SO вопросов, но я не знал, как применить к своему коду, так как мой код работает с React Server.Есть идеи?