Invariante overtreding: objecten zijn niet geldig als React-kind

In de renderfunctie van mijn component heb ik:

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

alles wordt goed weergegeven, maar wanneer ik op het element <li>klik, krijg ik de volgende foutmelding:

Uncaught Error: Invariant Violation: Objects zijn not valid as React
kind (gevonden: object met sleutels {dispatchConfig, dispatchMarker,
nativeEvent, target, currentTarget, type, eventPhase, bellen,
annuleerbaar, timeStamp, defaultPrevented, isTrusted, bekijken, detail,
screenX, screenY, clientX, clientY, ctrlKey, shiftKey, altKey,
metaKey, getModifierState, knop, knoppen, relatedTarget, pageX,
pageY, isDefaultPrevented, isPropagationStopped, _dispatchListeners,
_dispatchID’s}). Als je een verzameling onderliggende elementen wilt renderen, gebruik dan in plaats daarvan een array of wikkel het object in met createFragment(object) from
de React-add-ons. Controleer de weergavemethode van Welcome.

Als ik verander naar this.onItemClick.bind(this, item)naar (e) => onItemClick(e, item)in de kaartfunctie werkt alles zoals verwacht.

Als iemand zou kunnen uitleggen wat ik verkeerd doe en uitleggen waarom ik deze foutmelding krijg, zou dat geweldig zijn

UPDATE 1:
onItemClick-functie is als volgt en het verwijderen van this.setState resulteert in het verdwijnen van de fout.

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

Maar ik kan deze regel niet verwijderen omdat ik de status van dit onderdeel moet bijwerken

Antwoord 1, autoriteit 100%

Ik had deze fout en het bleek dat ik onbedoeld een Object in mijn JSX-code aan het opnemen was waarvan ik had verwacht dat het een stringwaarde zou zijn:

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

breadcrumbElementwas vroeger een string, maar was door een refactor een Object geworden. Helaas heeft de foutmelding van React me niet goed naar de regel verwezen waar het probleem bestond. Ik moest mijn stacktracering helemaal terug volgen totdat ik herkende dat de “rekwisieten” in een component werden doorgegeven en toen vond ik de beledigende code.

U moet ofwel verwijzen naar een eigenschap van het object die een tekenreekswaarde is, of het object converteren naar een wenselijke tekenreeksrepresentatie. Een optie kan JSON.stringifyzijn als je de inhoud van het object echt wilt zien.

Antwoord 2, autoriteit 25%

Dus ik kreeg deze fout bij het weergeven van de eigenschap createdAt, wat een Date-object is. Als u .toString()aan het einde op deze manier samenvoegt, zal het de conversie uitvoeren en de fout elimineren. Post dit gewoon als een mogelijk antwoord voor het geval iemand anders hetzelfde probleem tegenkomt:

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

Antwoord 3, autoriteit 10%

Ik kreeg net dezelfde fout, maar door een andere fout: ik gebruikte dubbele accolades zoals:

{{count}}

om de waarde van countin te voegen in plaats van de juiste:

{count}

die de compiler vermoedelijk heeft omgezet in {{count: count}}, d.w.z. proberen een object in te voegen als een React-kind.

Antwoord 4, autoriteit 7%

Ik dacht dat ik hier iets aan zou toevoegen omdat ik vandaag hetzelfde probleem had, het bleek dat het was omdat ik alleen de functie terugstuurde, toen ik het in een <div>-tag verpakte begon te werken, zoals hieronder

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

Het bovenstaande veroorzaakte de fout. Ik heb het probleem opgelost door de sectie return()te wijzigen in:

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

…of gewoon:

return gallerySection

Antwoord 5, autoriteit 5%

Reageer kind(enkelvoud) moet het type primitiefgegevenstypegeen object of het kan een JSX-tag zijn (wat in ons geval niet het geval is). Gebruik het Proptypes-pakket in ontwikkeling om ervoor te zorgen dat validatie plaatsvindt.

Gewoon een snelle vergelijking van het codefragment (JSX) om u een idee te geven:

1. Fout: object wordt doorgegeven aan kind

   <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. Zonder fout: waarbij de eigenschap van het object (die primitief zou moeten zijn, d.w.z. een tekenreekswaarde of een geheel getal) wordt doorgegeven aan de onderliggende waarde.

   <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; (Van de onderstaande bron) : Zorg ervoor dat alle items die je in JSX rendert primitieven zijn en geen objecten wanneer je React gebruikt. Deze fout treedt meestal op omdat een functie die betrokken is bij het verzenden van een gebeurtenis een onverwacht objecttype heeft gekregen (dwz een object wordt doorgegeven terwijl u een string zou moeten doorgeven) of een deel van de JSX in uw component niet verwijst naar een primitief (dwz this.props vs deze.props.naam).

Bron – codingbismuth.com

Antwoord 6, autoriteit 3%

De mijne had te maken met het vergeten van de accolades rond rekwisieten die naar een presentatiecomponent werden gestuurd:

Vroeger:

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

Na

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

Antwoord 7, autoriteit 3%

De mijne had te maken met het onnodig plaatsen van accolades rond een variabele die een HTML-element bevat binnen de return-instructie van de render()-functie. Hierdoor behandelde React het als een object in plaats van een element.

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

Toen ik de accolades uit het element verwijderde, was de fout verdwenen en werd het element correct weergegeven.

Antwoord 8, autoriteit 3%

Ook ik kreeg deze “Objecten zijn niet geldig als een React-kind”-fout en voor mij was de oorzaak te wijten aan het aanroepen van een asynchrone functie in mijn JSX. Zie hieronder.

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

Wat ik heb geleerd is dat asynchrone weergave niet wordt ondersteund in React. Het React-team werkt aan een oplossing zoals hier gedocumenteerd.

Antwoord 9, autoriteit 2%

Voor iedereen die Firebase met Android gebruikt, maakt dit alleen Android kapot. Mijn iOS-emulatie negeert het.

En zoals hierboven gepost door Apoorv Bankey.

Alles boven Firebase V5.0.3, voor Android, is een mislukking. Oplossing:

npm i --save [email protected]

Hier meerdere keren bevestigd
https://github.com/firebase/firebase-js-sdk/issues/871

Antwoord 10, autoriteit 2%

Ik heb ook hetzelfde probleem, maar mijn fout is zo stom. Ik probeerde rechtstreeks toegang te krijgen tot het object.

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

Antwoord 11

Meestal komt dit naar voren omdat je niet goed destructureert. Neem bijvoorbeeld deze code:

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

We declareren het met de = text =>param. Maar echt, React verwacht dat dit een allesomvattend props-object is.

Dus we zouden eigenlijk zoiets als dit moeten doen:

const Button = props => <button>{props.text}</button>
const SomeForm = () => (
  <Button text="Save" />
)

Zie je het verschil? De param propshier kan van alles worden genoemd (propsis gewoon de conventie die overeenkomt met de nomenclatuur), React verwacht gewoon een object met sleutels en vals.

Met het vernietigen van objectenkan, en zal vaak zien, zoiets als dit:

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

…wat werkt.

De kans is groot dat iedereen die dit tegenkomt, per ongeluk de rekwisieten van hun component tot param heeft verklaard zonder te vernietigen.

Antwoord 12

Ik had hetzelfde probleem omdat ik de propsniet tussen de accolades had gezet.

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

Dus als uw code vergelijkbaar is met de bovenstaande, krijgt u deze foutmelding.
Om dit op te lossen, plaatst u accolades rond de props.

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

Antwoord 13

In mijn geval deed de fout zich voor omdat ik de array van elementen tussen accoladesterugstuurde in plaats van alleen de array zelf terug te geven.

Code met fout

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

Correcte code

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

Antwoord 14

Als je om wat voor reden dan ook firebase hebt geïmporteerd. Probeer dan npm i --save [email protected]uit te voeren. Dit komt omdat firebase react-native breekt, dus als je dit uitvoert, wordt het opgelost.

Antwoord 15

In mijn geval was ik vergeten een html-element van de renderfunctie te retourneren en ik was een object aan het retourneren. Wat ik deed, was dat ik de {items} gewoon omwikkelde met een html-element – een eenvoudige div zoals hieronder

<ul>{items}</ul>

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      value: null,
      getDatacall : null
    }
    this.getData = this.getData.bind(this)
  }
  getData() {
  //   if (this.state.getDatacall === false) {
    sleep(4000)
    returnData("what is the time").then(value => this.setState({value, getDatacall:true}))
    // }
  }
  componentDidMount() {
    sleep(4000)
    this.getData()
  }
  render() {
    this.getData()
    sleep(4000)
    console.log(this.state.value)
    return (
      <p> { this.state.value } </p>
    )
  }
}

render() {
    this.getData()
    sleep(4000)
    console.log(this.state.value)
    return (
      <p> { JSON.stringify(this.state.value) } </p>
    )
  }

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>

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

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

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

let payload = {
      guess: this.userInput.value
};
this.props.dispatch(checkAnswer(payload));

 // let payload = {
  //   guess: this.userInput.value
  // };
this.props.dispatch(checkAnswer(this.userInput.value));

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

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

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

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

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

{response.isDisplayOptions &&
{element}
}

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

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

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