Infracción invariable: los objetos no son válidos como React child

En la función de render de mi componente tengo:

render() {
    const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => {
      return (<li onClick={this.onItemClick.bind(this, item)} key={item}>{item}</li>);
    });
    return (
      <div>
        ...
                <ul>
                  {items}
                </ul>
         ...
      </div>
    );
  }

todo funciona bien, sin embargo, al hacer clic en el <li>elemento, recibo el siguiente error:

Error no detectado: Infracción invariable: los objetos no son válidos como React child (encontrado: objeto con claves {dispatchConfig, dispatchMarker, nativeEvent, target, currentTarget, type, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, view, detail, screenX , screenY, clientX, clientY, ctrlKey, shiftKey, altKey, metaKey, getModifierState, button, buttons, relatedTarget, pageX, pageY, isDefaultPrevented, isPropagationStopped, _dispatchListeners, _dispatchIDs}). Si tenía la intención de representar una colección de elementos secundarios, use una matriz en su lugar o ajuste el objeto usando createFragment (objeto) de los complementos React. Verifique el método de renderizado de Welcome.

Si cambio a this.onItemClick.bind(this, item)que (e) => onItemClick(e, item)dentro de las funciones todo funciona como se esperaba mapa.

Si alguien pudiera explicar lo que estoy haciendo mal y explicar por qué recibo este error, sería genial

ACTUALIZACIÓN 1: la
función onItemClick es la siguiente y al eliminar this.setState se produce la desaparición del error.

onItemClick(e, item) {
    this.setState({
      lang: item,
    });
}

Pero no puedo eliminar esta línea ya que necesito actualizar el estado de este componente

Estaba teniendo este error y resultó que estaba incluyendo involuntariamente un objeto en mi código JSX que esperaba que fuera un valor de cadena:

return (
    <BreadcrumbItem href={routeString}>
        {breadcrumbElement}
    </BreadcrumbItem>
)

breadcrumbElementsolía ser una cadena pero debido a un refactor se había convertido en un Objeto. Desafortunadamente, el mensaje de error de React no hizo un buen trabajo al señalarme la línea donde existía el problema. Tuve que seguir mi rastro de la pila hasta que reconocí los "accesorios" que se pasaban a un componente y luego encontré el código ofensivo.

Deberá hacer referencia a una propiedad del objeto que sea un valor de cadena o convertir el Objeto en una representación de cadena que sea deseable. Una opción podría ser JSON.stringifysi realmente desea ver el contenido del Objeto.

Entonces recibí este error al intentar mostrar la createdAtpropiedad que es un objeto Date. Si concatena .toString()al final de esta manera, hará la conversión y eliminará el error. Simplemente publique esto como una posible respuesta en caso de que alguien más se encuentre con el mismo problema:

{this.props.task.createdAt.toString()}

Acabo de recibir el mismo error pero debido a un error diferente: utilicé llaves dobles como:

{{count}}

para insertar el valor de en countlugar del correcto:

{count}

en el que presumiblemente se convirtió el compilador {{count: count}}, es decir, tratando de insertar un objeto como un hijo React

Solo pensé que agregaría a esto ya que tenía el mismo problema hoy, resulta que fue porque estaba devolviendo solo la función, cuando lo envolví en una <div>etiqueta comenzó a funcionar, como se muestra a continuación

renderGallery() {
  const gallerySection = galleries.map((gallery, i) => {
    return (
      <div>
        ...
      </div>
    );
  });
  return (
    {gallerySection}
  );
}

Lo anterior causó el error. Solucioné el problema cambiando la return()sección a:

return (
  <div>
    {gallerySection}
  </div>
);

...o simplemente:

return gallerySection

React child (singular) debe ser un tipo de datos primitivos , no un objeto o podría ser una etiqueta JSX (que no es nuestro caso) . Utilice el paquete Proptypes en desarrollo para asegurarse de que se realice la validación.

Solo una comparación rápida de fragmentos de código (JSX) para representarlo con una idea:

1. Error: con el objeto que se pasa al niño

   <div>
   {/* item is object with user's name and its other details on it */}
    {items.map((item, index) => {
     return <div key={index}>
   --item object invalid as react child--->>>{item}</div>;
    })}
   </div>

2. Sin error: con la propiedad del objeto ( que debe ser primitiva, es decir, un valor de cadena o valor entero ) que se pasa al hijo.

   <div>
    {/* item is object with user's name and its other details on it */}
     {items.map((item, index) => {
      return <div key={index}>
   --note the name property is primitive--->{item.name}</div>;
     })}
   </div>

TLDR; (De la fuente a continuación): asegúrese de que todos los elementos que está renderizando en JSX son primitivos y no objetos al usar React. Este error generalmente ocurre porque a una función involucrada en el envío de un evento se le ha dado un tipo de objeto inesperado (es decir, pasar un objeto cuando debería pasar una cadena) o parte de JSX en su componente no hace referencia a una primitiva (es decir, this.props vs this.props.name).

Fuente - codingbismuth.com

El mío tenía que ver con poner innecesariamente llaves alrededor de una variable que contenía un elemento HTML dentro de la declaración de retorno de la función render (). Esto hizo que React lo tratara como un objeto en lugar de un elemento.

render() {
  let element = (
    <div className="some-class">
      <span>Some text</span>
    </div>
  );

  return (
    {element}
  )
}

Una vez que quité las llaves del elemento, el error desapareció y el elemento se procesó correctamente.

El mío tuvo que ver con olvidar las llaves entre los accesorios que se envían a un componente de presentación:

Antes de:

const TypeAheadInput = (name, options, onChange, value, error) => {

Después

const TypeAheadInput = ({name, options, onChange, value, error}) => {

Yo también recibí este error "Los objetos no son válidos como React child" y para mí la causa se debió a llamar a una función asincrónica en mi JSX. Vea abajo.

class App extends React.Component {
    showHello = async () => {
        const response = await someAPI.get("/api/endpoint");

        // Even with response ignored in JSX below, this JSX is not immediately returned, 
        // causing "Objects are not valid as a React child" error.
        return (<div>Hello!</div>);
    }

    render() {
        return (
            <div>
                {this.showHello()}
            </div>
        );
    }
}

Lo que aprendí es que la representación asincrónica no es compatible con React. El equipo de React está trabajando en una solución como se documenta aquí .

Para cualquiera que use Firebase con Android, esto solo rompe Android. Mi emulación de iOS lo ignora.

Y según lo publicado por Apoorv Bankey arriba.

Cualquier cosa por encima de Firebase V5.0.3, para Android, atm es un fracaso. Reparar:

npm i --save firebase@5.0.3

Confirmado numerosas veces aquí https://github.com/firebase/firebase-js-sdk/issues/871

También tengo el mismo problema pero mi error es tan estúpido. Estaba tratando de acceder al objeto directamente.

class App extends Component {
    state = {
        name:'xyz',
        age:10
    }
    render() {
        return (
            <div className="App">
                // this is what I am using which gives the error
                <p>I am inside the {state}.</p> 

                //Correct Way is

                <p>I am inside the {this.state.name}.</p> 
            </div>
        );
    }                                                                             

}

Si por alguna razón importó firebase. Entonces intenta correr npm i --save firebase@5.0.3. Esto se debe a que Firebase rompe react-native, por lo que ejecutar esto lo solucionará.

En mi caso, se me olvidó devolver un elemento html de la función render y estaba devolviendo un objeto. Lo que hice fue envolver los {items} con un elemento html, un div simple como el siguiente

<ul>{items}</ul>

Tuve el mismo problema porque no puse las propsllaves.

export default function Hero(children, hero ) {
    return (
        <header className={hero}>
            {children}
        </header>
    );
}

Entonces, si su código es similar al anterior, obtendrá este error. Para resolver esto, simplemente coloque llaves alrededor del props.

export default function Hero({ children, hero }) {
    return (
        <header className={hero}>
            {children}
        </header>
    );
}

Recibí el mismo error, cambié esto

export default withAlert(Alerts)

a esto

export default withAlert()(Alerts).

En versiones anteriores, el código anterior estaba bien, pero en versiones posteriores arroja un error. Entonces use el código posterior para evitar el error.

En mi caso, el error estaba ocurriendo porque devolví la matriz de elementos entre llaves lugar de simplemente devolver la matriz en sí.

Código con error

   render() {
        var rows = this.props.products.map(product => <tr key={product.id}><td>{product.name}</td><td>{product.price}</td></tr>
        );
        return {rows};
    }

Código correcto

render() {
    var rows = this.props.products.map(product => <tr key={product.id}><td>{product.name}</td><td>{product.price}</td></tr>
    );
    return rows;
}

¡Solo estabas usando las teclas de objeto, en lugar de todo el objeto!

Puede encontrar más detalles aquí: https://github.com/gildata/RAIO/issues/48

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class SCT extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            data: this.props.data,
            new_data: {}
        };
    }
    componentDidMount() {
        let new_data = this.state.data;
        console.log(`new_data`, new_data);
        this.setState(
            {
                new_data: Object.assign({}, new_data)
            }
        )
    }
    render() {
        return (
            <div>
                this.state.data = {JSON.stringify(this.state.data)}
                <hr/>
                <div style={{color: 'red'}}>
                    {this.state.new_data.name}<br />
                    {this.state.new_data.description}<br />
                    {this.state.new_data.dependtables}<br />
                </div>
            </div>
        );
    }
}

SCT.propTypes = {
    test: PropTypes.string,
    data: PropTypes.object.isRequired
};

export {SCT};
export default SCT;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Tengo el mismo problema, en mi caso, actualizo el estado redux , y los nuevos parámetros de datos no coincidían con los parámetros antiguos, así que cuando quiero acceder a algunos parámetros a través de este Error,

Quizás esta experiencia ayude a alguien

Si está utilizando Firebase y ve este error, vale la pena verificar si lo está importando correctamente. A partir de la versión 5.0.4, debe importarlo así:

import firebase from '@firebase/app'
import '@firebase/auth';
import '@firebase/database';
import '@firebase/storage';

Sí, lo sé. También perdí 45 minutos en esto.

Por lo general, esto aparece porque no se desestructura correctamente. Tome este código por ejemplo:

const Button = text => <button>{text}</button>

const SomeForm = () => (
  <Button text="Save" />
)

Lo estamos declarando con el = text =>param. Pero en realidad, React espera que este sea un propsobjeto que lo abarque todo .

Entonces realmente deberíamos estar haciendo algo como esto:

const Button = props => <button>{props.text}</button>

const SomeForm = () => (
  <Button text="Save" />
)

¿Nota la diferencia? El propsparámetro aquí podría llamarse cualquier cosa ( propses solo la convención que coincide con la nomenclatura), React solo espera un objeto con claves y valles.

Con la desestructuración de objetos puede hacer, y verá con frecuencia, algo como esto:

const Button = ({ text }) => <button>{text}</button>

const SomeForm = () => (
  <Button text="Save" />
)

... que funciona.

Lo más probable es que cualquiera que se tope con esto simplemente haya declarado accidentalmente los accesorios de sus componentes param sin desestructuración.

Acabo de pasar por una versión realmente tonta de este error, que también podría compartir aquí para la posteridad.

Tuve algunos JSX como este:

...
{
  ...
  <Foo />
  ...
}
...

Necesitaba comentar esto para depurar algo. Usé el atajo de teclado en mi IDE, lo que resultó en esto:

...
{
  ...
  { /* <Foo /> */ }
  ...
}
...

Lo cual, por supuesto, no es válido: ¡los objetos no son válidos como hijos secundarios!

Me gustaría agregar otra solución a esta lista.

Especificaciones:

• "reaccionar": "^ 16.2.0",
• "react-dom": "^ 16.2.0",
• "react-redux": "^ 5.0.6",
• "react-scripts": "^ 1.0.17",
• "redux": "^ 3.7.2"

Encontré el mismo error:

Error no detectado: los objetos no son válidos como React child (encontrado: objeto con claves {XXXXX}). Si desea representar una colección de elementos secundarios, utilice una matriz en su lugar.

Este fue mi código:

let payload = {
      guess: this.userInput.value
};

this.props.dispatch(checkAnswer(payload));

Solución:

  // let payload = {
  //   guess: this.userInput.value
  // };

this.props.dispatch(checkAnswer(this.userInput.value));

El problema estaba ocurriendo porque la carga útil estaba enviando el artículo como un objeto. Cuando eliminé la variable de carga útil y puse el valor de entrada de usuario en el despacho, todo comenzó a funcionar como se esperaba.

En caso de que esté usando Firebase cualquiera de los archivos dentro de su proyecto. ¡Entonces solo coloca esa declaración de importación de Firebase al final!

Sé que esto suena loco pero ¡pruébalo!

Mi problema fue simple cuando me enfrenté al siguiente error:

objects are not valid as a react child (found object with keys {...}

era solo que estaba pasando un objeto con las claves especificadas en el error mientras intentaba representar el objeto directamente en un componente usando {object} esperando que fuera una cadena

object: {
    key1: "key1",
    key2: "key2"
}

mientras renderizaba en un componente React, usé algo como a continuación

render() {
    return this.props.object;
}

pero debería haber sido

render() {
    return this.props.object.key1;
}

Si usa componentes sin estado, siga este tipo de formato:

const Header = ({pageTitle}) => (
  <h1>{pageTitle}</h1>
);
export {Header};

Esto pareció funcionar para mí.

Algo como esto me acaba de pasar ...

Escribí:

{response.isDisplayOptions &&
{element}
}

Colocándolo dentro de un div lo arregló:

{response.isDisplayOptions &&
    <div>
        {element}
    </div>
}

Encontrado: objeto con claves

Lo que significa que pasar algo es un valor clave. Por lo tanto, debe modificar su controlador:

onItemClick(e, item) {
   this.setState({
     lang: item,
   });
}

onItemClick({e, item}) {
  this.setState({
    lang: item,
  });
}

Te perdiste las llaves ( {}).

En mi caso, agregué un asíncrono a mi componente de función hijo y encontré este error. No use asíncrono con el componente hijo.

En el caso de usar Firebase, si no funciona colocando al final de las importdeclaraciones, puede intentar poner eso dentro de uno de los métodos del ciclo de vida, es decir, puede ponerlo dentro componentWillMount().

componentWillMount() {
    const firebase = require('firebase');
    firebase.initializeApp({
        //Credentials
    });
}

Invariant Violation: Objects are not valid as a React childme pasó cuando usé un componente que necesitaba renderItemaccesorios, como:

renderItem={this.renderItem}

y mi error fue hacer mi renderItemmétodo async.

Mi error fue por escribirlo de esta manera:

props.allinfo.map((stuff, i)=>{
  return (<p key={i}> I am {stuff} </p>)
})

en vez de:

props.allinfo.map((stuff, i)=>{
  return (<p key={i}> I am {stuff.name} </p>)
})

Significaba que estaba tratando de representar el objeto en lugar del valor dentro de él.

editar: esto es para reaccionar no nativo.