In meiner Komponente's render Funktion habe ich:
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 wird gut gerendert, aber wenn ich auf das Element <li>
klicke, erhalte ich den folgenden Fehler:
Unerwarteter Fehler: Invariant Violation: Objects are not valid as a React Kind (gefunden: Objekt mit Schlüsseln {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}). Wenn Sie eine Sammlung von Kindern darstellen wollen, verwenden Sie stattdessen ein Array oder wickeln Sie das Objekt mit createFragment(object) von den React Add-ons. Überprüfen Sie die Render-Methode von
Welcome
.
Wenn ich this.onItemClick.bind(this, item)
in (e) => onItemClick(e, item)
innerhalb der Map-Funktion ändere, funktioniert alles wie erwartet.
Wenn jemand erklären könnte, was ich falsch mache und warum ich diesen Fehler bekomme, wäre das großartig.
UPDATE 1: onItemClick-Funktion ist wie folgt und das Entfernen von this.setState führt dazu, dass der Fehler verschwindet.
onItemClick(e, item) {
this.setState({
lang: item,
});
}
Aber ich kann diese Zeile nicht entfernen, da ich den Status dieser Komponente aktualisieren muss
Ich hatte diesen Fehler, und es stellte sich heraus, dass ich unbeabsichtigt ein Objekt in meinem JSX-Code, die ich erwartet hatte, um einen String-Wert sein, enthalten war:
return (
<BreadcrumbItem href={routeString}>
{breadcrumbElement}
</BreadcrumbItem>
)
breadcrumbElement
war ursprünglich ein String, wurde aber aufgrund eines Refactors zu einem Object. Leider hat die Fehlermeldung von React keine gute Arbeit geleistet, um mich auf die Zeile hinzuweisen, in der das Problem bestand. Ich musste meinen Stack-Trace den ganzen Weg zurückverfolgen, bis ich erkannte, dass "props" an eine Komponente übergeben wurde und dann fand ich den fehlerhaften Code.
Sie müssen entweder auf eine Eigenschaft des Objekts verweisen, die ein String-Wert ist, oder das Objekt in eine String-Darstellung konvertieren, die erwünscht ist. Eine Option könnte JSON.stringify
sein, wenn Sie den Inhalt des Objekts tatsächlich sehen wollen.
Ich bekam diesen Fehler, als ich versuchte, die Eigenschaft createdAt
anzuzeigen, die ein Date-Objekt ist. Wenn Sie .toString()
am Ende wie folgt verketten, wird die Konvertierung durchgeführt und der Fehler behoben. Ich stelle dies nur als mögliche Antwort ein, falls jemand auf das gleiche Problem stößt:
{this.props.task.createdAt.toString()}
Dank [eines Kommentars von zerkms] (https://stackoverflow.com/questions/33117449/invariant-violation-objects-are-not-valid-as-a-react-child/33118025#comment54048780_33117449) konnte ich meinen dummen Fehler bemerken:
Ich hatte onItemClick(e, item)
wenn ich onItemClick(item, e)
hätte haben sollen.