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

react js tutorial

Question

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 elemento <li> 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 pretendía 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) a (e) => onItemClick(e, item) dentro de la función de mapa, todo funciona como se esperaba.

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, desaparece el error.

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

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

Answer 1

1. Lo que sucede es que la función onClick que está intentando implementar se ejecuta de inmediato.

2. Como nuestro código no es HTML, es javascript, por lo que se interpreta como una ejecución de función.

3. La función onClick toma una función como argumento, no una ejecución de función.

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

Esto definirá una función onClick en el elemento de la lista que se ejecutará después de hacer clic en él no tan pronto como se muestre nuestro componente.

Answer 2

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

Se pueden 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>

Answer 3

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!

Answer 4

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

{{count}}

para insertar el valor de count lugar del correcto:

{count}

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

Answer 5

Algo como esto me acaba de pasar ...

Escribí:

{response.isDisplayOptions &&
{element}
}

Colocándolo dentro de un div lo arregló:

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

Answer 6

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

Answer 7

En caso de que esté usando Firebase alguno 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!

Answer 8

En el caso de usar Firebase, si no funciona al poner al final las declaraciones de import , puede intentar ponerlo dentro del método del ciclo de vida, es decir, puede ponerlo dentro de componentWillMount() .

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

Answer 9

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>

Answer 10

Entonces recibí este error al intentar mostrar la propiedad createdAt que es un objeto Date. Si concatena .toString() al final de esta forma, realizará 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()}

Answer 11

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

breadcrumbElement solí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.stringify si realmente desea ver el contenido del Objeto.

Answer 12

La mía tenía que ver con poner innecesariamente llaves entre 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 eliminé las llaves del elemento, el error desapareció y el elemento se procesó correctamente.

Answer 13

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.

Answer 14

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.

Answer 15

Mi problema fue muy particular: en mi archivo .env , puse un comentario en la línea que tenía mi URL de API:

API_URL=https://6ec1259f.ngrok.io #comment

Invariant violation error de Invariant violation al intentar iniciar sesión / registrarme, ya que la URL de la API estaba equivocada.

Answer 16

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 al intentar 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;
}

Answer 17

Obviamente, como otros han mencionado anteriormente en este hilo, en React JSX props.children no puede ser de tipo Object . Esta NO es la causa raíz del problema en su pregunta específica.

Si lee detenidamente el texto del error, verá que React ha producido el error al intentar representar un Objeto que coincide con la firma de un SyntheticEvent :

Uncaught Error: Invariant Violation: Objects are not valid as a React child (found: object with keys {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}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of Welcome.

Sin embargo, uno se pregunta por qué está tratando de representar un SyntheticEvent , y aquí es donde reside la respuesta real a su pregunta. Obviamente no tiene intención de representar un SyntheticEvent , pero tiene los parámetros del controlador de eventos fuera de servicio .

En su método de render , está vinculando el controlador de eventos onItemClick al componente de su clase y pasando el item como argumento:

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

De acuerdo con la documentación de Function.prototype.bind , todos los argumentos pasados ​​después de thisArg se anteponen a los argumentos pasados ​​posteriormente cuando la función de destino se invoca más tarde :

arg1, arg2, ...

Argumentos para anteponer argumentos proporcionados a la función enlazada cuando se invoca la función de destino.

Si luego miramos el controlador de eventos, vemos que el parámetro e aparece antes del item parámetro.

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

Cuando se onItemClick(e, item) , el item pasado durante la invocación de bind precederá al event desencadenante, por lo que el parámetro e se establecerá en el elemento asignado y vinculado, y el item parámetro se establecerá en el event .

Cuando se llama a setState , lang se establecerá en SyntheticEvent representa el evento onClick desencadenante, y cuando intente representar el valor en this.state.lang en this.state.lang lugar, recibirá el error de Infracción Invariante que ha visto.

Answer 18

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. Fijar:

npm i --save [email protected]

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

Answer 19

React child (singular) debe ser un tipo de datos primitive , 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 is passed which is error--->>>{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

Answer 20

Recibí este error al representar algo en un operador ternario. Lo que hice:

render(){
  const bar = <div>asdfasdf</div>
  return ({this.state.foo ? {bar} : <div>blahblah</div>})
}

Resulta que debe ser una barra sin los soportes, como:

render(){
  const bar = <div>asdfasdf</div>
  return ({this.state.foo ? bar : <div>blahblah</div>})
}

Answer 21

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.

Answer 22

Si por alguna razón importó firebase. Luego intente ejecutar npm i --save [email protected] . Esto se debe a que Firebase rompe react-native, por lo que ejecutar esto lo solucionará.

Answer 23

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

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

Esto pareció funcionar para mí.

Answer 24

Simplemente cree un elemento JSX válido. En mi caso, asigné un componente a un objeto.

const AwesomeButtonComponent = () => <button>AwesomeButton</button>
const next = {
  link: "http://awesomeLink.com",
  text: "Awesome text",
  comp: AwesomeButtonComponent
}

En otro lugar en mi Código, quería asignar dinámicamente ese botón.

return (
  <div>
    {next.comp ? next.comp : <DefaultAwesomeButtonComp/>}
  </div>
)

Resuelvo esto declarando una compilación JSX que inicialicé a través de la compilación de accesorios.

const AwesomeBtnFromProps = next.comp
return (
  <div>
    {next.comp ? <AwesomeBtnFromProps/> : <DefaultAwesomeButtonComp/>}
  </div>
)

Answer 25

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 etiqueta <div> 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 sección return() a:

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

...o simplemente:

return gallerySection

Answer 26

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

}

Answer 27

Tengo el mismo problema, en mi caso, actualizo el estado redux , y los nuevos parámetros de datos no coinciden 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

Answer 28

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í .

Answer 29

Invariant Violation: Objects are not valid as a React child que me ocurrió Invariant Violation: Objects are not valid as a React child cuando renderItem un componente que necesitaba un accesorio de renderItem , como:

renderItem={this.renderItem}

y mi error fue hacer que mi método renderItem async .

Answer 30

try{
    throw new Error(<p>An error occured</p>)
}catch(e){
    return (e)
}

El código anterior produjo el error, luego lo reescribí así:

try{
    throw(<p>An error occured</p>)
}catch(e){
    return (e)
}

Tome nota de la eliminación del nuevo error () en el bloque de prueba ...

Una mejor manera de escribir el código para evitar este mensaje de error. Se espera que un objeto sea arrojado literalmente sin tirar es pasar una cadena al nuevo error () en lugar de JSX y devolver JSX en su bloque catch, algo como esto :

try{
    throw new Error("An error occurred")
}catch(e){
    return (
        <p>{e.message}</p>
    )
}