In mijn component's render functie 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 rendert goed, maar als ik op het <li>
element klik krijg ik de volgende foutmelding:
Uncaught Error: Invariant Violation: Objecten zijn niet geldig als een React child (gevonden: object met sleutels {dispatchConfig, dispatchMarker, nativeEvent, target, currentTarget, type, eventPhase, bubbels, cancelable, timeStamp, defaultPrevented, isTrusted, view, detail, screenX, screenY, clientX, clientY, ctrlKey, shiftKey, altKey, metaKey, getModifierState, button, buttons, relatedTarget, pageX, pageY, isDefaultPrevented, isPropagationStopped, _dispatchListeners, _dispatchIDs}). Als je een verzameling van kinderen wilt renderen, gebruik dan een array of pak het object in met createFragment(object) van de React add-ons. Controleer de render methode van
Welcome
.
Als ik this.onItemClick.bind(this, item)
verander in (e) => onItemClick(e, item)
binnen de map functie werkt alles zoals verwacht.
Als iemand me kan uitleggen wat ik fout doe en waarom ik deze fout 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 toestand van deze component moet bijwerken
Ik had deze fout en het bleek dat ik onbedoeld een Object in mijn JSX code opnam, terwijl ik verwachtte dat het een string waarde zou zijn:
return (
<BreadcrumbItem href={routeString}>
{breadcrumbElement}
</BreadcrumbItem>
)
breadcrumbElement
was eerst een string maar was door een refactor een Object geworden. Helaas deed React's foutmelding geen goed werk door me te wijzen op de regel waar het probleem zich voordeed. Ik moest mijn stack trace helemaal terug volgen tot ik de "props" herkende die in een component werd doorgegeven en toen vond ik de overtredende code.
Je moet ofwel verwijzen naar een eigenschap van het object dat een string waarde is of het Object converteren naar een string representatie die wenselijk is. Een optie zou JSON.stringify
kunnen zijn als je daadwerkelijk de inhoud van het Object wilt zien.
Ik kreeg deze foutmelding toen ik probeerde de createdAt
eigenschap weer te geven, wat een Datum object is. Als je .toString()
aan het eind aaneenschakelt zoals hier, dan zal het de conversie doen en de fout elimineren. Ik post dit alleen als een mogelijk antwoord voor het geval iemand anders tegen hetzelfde probleem aanloopt:
{this.props.task.createdAt.toString()}
Dankzij een opmerking van zerkms, heb ik mijn stomme fout kunnen opmerken:
Ik had onItemClick(e, item)
terwijl ik onItemClick(item, e)
had moeten hebben.