În component's render function am:
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>
);
}
tot ce face bine, cu toate acestea, atunci când faceți clic pe `
Eroare Necunoscută: Invariante Încălcare: Obiecte nu sunt valabile, de a Reacționa copil (găsit: obiect cu cheile {dispatchConfig, dispatchMarker, nativeEvent, țintă, currentTarget, tip, eventPhase, bule, anulat, timeStamp, defaultPrevented, isTrusted, vedere, detaliu, screenX, screenY, clientX, clientY, ctrlKey, shiftKey, altKey, metaKey, getModifierState, buton, butoane, relatedTarget, pageX, pageY, isDefaultPrevented, isPropagationStopped, _dispatchListeners, _dispatchIDs}). Dacă ai vrut să facă o colecție de copii, utilizați o matrice în loc sau folie de obiect folosind createFragment(obiect) din Reacționa add-on-uri. Verificați metoda de randare de "bun venit".
Dacă am schimba pentru asta.onItemClick.bind(acest, articol)a
(e) => onItemClick(e, element)` în funcție de hartă totul funcționează cum era de așteptat.
Dacă cineva ar putea explica ceea ce fac greșit și să explic de ce am aceasta eroare, ar fi grozav
UPDATE 1: onItemClick funcție este după cum urmează și eliminarea asta.setState rezultate în eroare dispare.
onItemClick(e, item) {
this.setState({
lang: item,
});
}
Dar eu nu pot lua această linie ca am nevoie pentru a actualiza starea de această componentă
Am fost parte această eroare și s-a dovedit a fi faptul că am fost în mod neintenționat, inclusiv un Obiect în JSX codul care am avut de așteptat să fie o valoare string:
return (
<BreadcrumbItem href={routeString}>
{breadcrumbElement}
</BreadcrumbItem>
)
breadcrumbElement
folosit pentru a fi un șir de caractere, dar din cauza unei refactor a devenit un Obiect. Din păcate, Reacționează's mesaj de eroare n't face o treabă bună în a indica mine la linie în cazul în care problema a existat. A trebuit să-mi urmez stivei tot drumul înapoi până am recunoscut "elemente de recuzită" a fi trecut într-o componentă și apoi am găsit codul ofensatoare.
Te'll trebuie să fie de referință o proprietate a obiectului, care este un șir de valoare sau de a converti Obiectul la un șir de reprezentare, care este de dorit. O opțiune ar putea fi pentru JSON.stringify` dacă chiar vrei pentru a vedea conținutul Obiectului.
Așa că am primit această eroare atunci când încearcă pentru a afișa createdAt de proprietate, care este un obiect date. Dacă ai înlănțui
.toString()` pe la sfârșitul astfel, se va face conversia și a elimina eroarea. Doar postarea asta ca pe un posibil răspuns în cazul în care altcineva a fugit în aceeași problemă:
{this.props.task.createdAt.toString()}
Tocmai am primit aceeasi eroare, dar din cauza la o altă greșeală: am folosit acolade duble, cum ar fi:
{{count}}
pentru a introduce valoarea de "numere", în loc de cea corectă:
{count}
care compilatorul probabil transformat în {{count: count}}
, adică încercarea de a introduce un Obiect ca un Reacționează copilul.
Doar crezut că mi-ar adauga la asta ca am avut aceeași problemă astăzi, se pare că a fost pentru că mă întorceam doar funcția, atunci când l-am înfășurat într-un `
renderGallery() {
const gallerySection = galleries.map((gallery, i) => {
return (
<div>
...
</div>
);
});
return (
{gallerySection}
);
}
Cele de mai sus a cauzat eroarea. Am rezolvat problema prin schimbarea reveni()` secțiunea a:
return (
<div>
{gallerySection}
</div>
);
...sau pur și simplu:
return gallerySection
Al meu a avut de-a face cu inutil de a pune acolade în jurul valorii de o variabilă care deține un element HTML în interiorul declarației de render() funcție. Acest lucru a făcut să Reacționeze trateze ca pe un obiect, mai degrabă decât un element.
render() {
let element = (
<div className="some-class">
<span>Some text</span>
</div>
);
return (
{element}
)
}
Odată l-am scos acolade de element, eroarea a fost plecat, și element fost prestate în mod corect.
Al meu a avut de-a face cu uitarea acolade întreaga recuzită a fi trimis la o prezentare componenta:
Înainte de a:
const TypeAheadInput = (name, options, onChange, value, error) => {
După
const TypeAheadInput = ({name, options, onChange, value, error}) => {
Reacționează copilul(singular) ar trebui să fie de tip a primitive tip de date nu obiect sau ar putea fi JSX tag-ul(care nu este în cazul nostru). Utilizarea Proptypes pachet în dezvoltare pentru a asigura validarea se întâmplă.
Doar un scurt fragment de cod(JSX) de comparatie care sa te reprezinte cu ideea :
TLDR; (De la sursa de mai jos) : Asigurați-vă că toate elementele pe care le're de redare în JSX sunt primitivi și nu obiecte atunci când se utilizează Reacționa. Această eroare se întâmplă de obicei pentru că o funcție implicat in trimiterea unui eveniment, a fost dat o neașteptată tip de obiect (i.e trece un obiect atunci când ar trebui să fie trece printr-un șir de caractere) sau o parte din JSX în componenta nu este corelarea un primitiv (de exemplu, acest lucru.recuzita vs asta.elemente de recuzită.numele).
Sursa - codingbismuth.com
Pentru oricine, folosind Firebase cu Android, asta doar pauze Android. IOS emulare ignoră.
Și ca postat de Apoorv Bankey de mai sus.
Ceva mai sus Firebase V5.0.3, pentru Android, atm este un bust. Fix:
npm i --save [email protected]
Confirmată de mai multe ori aici https://github.com/firebase/firebase-js-sdk/issues/871
Eu am fost obtinerea acestui "Obiecte nu sunt valabile ca un Reacționează copilul" eroare și pentru mine cauza a fost din cauza de asteptare o funcție asincron în JSX. A se vedea mai jos.
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>
);
}
}
Ceea ce am învățat este că asincron de redare nu este acceptată în Reacționa. Reacționează echipa este de lucru pe o soluție cum este documentat aici.
De asemenea, am aceeași problemă, dar greseala mea e atât de proastă. Am fost încercarea de a accesa obiectul direct.
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>
);
}
}
Dacă pentru un motiv oarecare importate firebase. Apoi încercați să rulați npm eu ... salva [email protected]
. Acest lucru este pentru că firebase rupe reacționa-nativ, așa că acest lucru va repara.
Ai fost doar folosind tastele de obiect, în loc de întregul obiect!
Mai multe detalii pot fi găsite aici: 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>
Am aceeasi problema, in cazul meu, Am actualiza redux stat, și noi parametri de date nu se potrivesc parametrii de vechi, Așa că atunci când vreau să accesez niște parametri prin această Eroare,
Poate că această experiență ajuta cineva
Problema mea a fost simplu, atunci când m-am confruntat cu urmatoarea eroare:
objects are not valid as a react child (found object with keys {...}
a fost doar faptul că am fost trece un obiect cu tastele specificate în eroare în timp ce încerca să facă obiectul direct într-o componentă folosind {obiect} așteptam să fie un șir de caractere
object: {
key1: "key1",
key2: "key2"
}
în timp ce redarea de pe un Reacționa Componentă, am folosit ceva de genul de mai jos
render() {
return this.props.object;
}
dar ar trebui să fi fost
render() {
return this.props.object.key1;
}
Am'd place să adăugați o altă soluție la această listă.
Specificatii:
Am intampinat aceeasi eroare:
Eroare Necunoscută: Obiecte nu sunt valabile ca un Reacționează copilul (găsit: obiect cu cheile {XXXXX}). Dacă ai vrut să facă o colecție de copii, folosiți-o matrice în loc.
Acest lucru a fost codul meu:
let payload = {
guess: this.userInput.value
};
this.props.dispatch(checkAnswer(payload));
Soluție:
// let payload = {
// guess: this.userInput.value
// };
this.props.dispatch(checkAnswer(this.userInput.value));
Problema a fost loc pentru că încărcătura a fost trimiterea elementului ca un obiect. Când am scos-o încărcătură variabilă și a pus userInput valoare în dispeceratul totul a început să lucreze cum era de așteptat.
Gasit: obiect cu chei
Ceea ce înseamnă că trece ceva este o cheie-valoare. Deci, aveți nevoie pentru a modifica handler:
onItemClick(e, item) {
this.setState({
lang: item,
});
}
onItemClick({e, item}) {
this.setState({
lang: item,
});
}
Ai ratat acolade ({}
).
Am si eu aceeasi eroare, am schimbat asta
export default withAlert(Alerte)`
la acest
export default withAlert()(Alerte)`.
În versiunile mai vechi fostul cod a fost ok , dar în versiunile ulterioare aruncă o eroare. Deci, utilizarea mai târziu cod pentru a evita errror.