I min komponent's gjengivelsesfunksjon har jeg:
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>
);
}
alt gjengis fint, men når jeg klikker på `
Uncaught Error: Brudd på invariant: Objekter er ikke gyldige som React
barn (funnet: objekt med nøkler {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}). Hvis du vil gjengi en samling av barn, kan du bruke en matrise i stedet eller pakke inn objektet ved hjelp av createFragment(object) fra React-tilleggene. Sjekk gjengivelsesmetoden til
Welcome
.
Hvis jeg endrer til this.onItemClick.bind(this, item)
til (e) => onItemClick(e, item)
inne i kartfunksjonen, fungerer alt som forventet.
Hvis noen kunne forklare hva jeg gjør galt og forklare hvorfor jeg får denne feilen, ville det være flott
OPPDATERING 1: onItemClick-funksjonen er som følger og fjerning av this.setState resulterer i at feilen forsvinner.
onItemClick(e, item) {
this.setState({
lang: item,
});
}
Men jeg kan ikke fjerne denne linjen, da jeg må oppdatere tilstanden til denne komponenten.
Jeg hadde denne feilen, og det viste seg at jeg utilsiktet inkluderte et objekt i JSX-koden min som jeg hadde forventet skulle være en strengverdi:
return (
<BreadcrumbItem href={routeString}>
{breadcrumbElement}
</BreadcrumbItem>
)
breadcrumbElement
pleide å være en streng, men på grunn av en refaktorering hadde det blitt et Object. Dessverre var ikke feilmeldingen i React god nok til å vise meg hvor problemet lå. Jeg måtte følge stack tracen min helt tilbake til jeg gjenkjente "props" som ble sendt inn i en komponent, og da fant jeg den feilaktige koden.
Du må enten referere til en egenskap i objektet som er en strengverdi, eller konvertere objektet til en ønsket strengrepresentasjon. Et alternativ kan være JSON.stringify
hvis du faktisk ønsker å se innholdet i objektet.
Jeg fikk denne feilen da jeg prøvde å vise egenskapen createdAt
, som er et Date-objekt. Hvis du setter sammen .toString()
på slutten slik, vil det gjøre konverteringen og eliminere feilen. Legger bare ut dette som et mulig svar i tilfelle noen andre har støtt på det samme problemet:
{this.props.task.createdAt.toString()}
Takket være en kommentar av zerkms, var jeg i stand til å legge merke til min dumme feil:
Jeg hadde onItemClick(e, item)
når jeg skulle hatt onItemClick(item, e)
.