Nella mia funzione di rendering del componente ho:
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>
);
}
tutto rende bene, tuttavia quando si fa clic sull'elemento <li>
ricevo il seguente errore:
Uncaught Error: Invariant Violation: Gli oggetti non sono validi come React
child (trovato: oggetto con chiavi {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}). Se intendevate rendere una collezione di bambini, usate invece un array o avvolgete l'oggetto usando createFragment(object) da React add-ons. Controlla il metodo di rendering di
Welcome
.
Se cambio a this.onItemClick.bind(this, item)
a (e) => onItemClick(e, item)
all'interno della funzione map tutto funziona come previsto.
Se qualcuno potesse spiegare cosa sto facendo di sbagliato e spiegare perché ottengo questo errore, sarebbe fantastico
AGGIORNAMENTO 1: La funzione onItemClick è la seguente e rimuovendo this.setState l'errore scompare.
onItemClick(e, item) {
this.setState({
lang: item,
});
}
Ma non posso rimuovere questa linea perché ho bisogno di aggiornare lo stato di questo componente
Stavo avendo questo errore e si è scoperto che stavo involontariamente includendo un oggetto nel mio codice JSX che mi aspettavo fosse un valore di stringa:
return (
<BreadcrumbItem href={routeString}>
{breadcrumbElement}
</BreadcrumbItem>
)
breadcrumbElement
era una stringa ma a causa di un refactor era diventato un Oggetto. Sfortunatamente, il messaggio di errore di React non ha fatto un buon lavoro nell'indicarmi la linea dove esisteva il problema. Ho dovuto seguire il mio stack trace fino a quando ho riconosciuto il "props" essere passato in un componente e poi ho trovato il codice incriminato.
Avrai bisogno di fare riferimento a una proprietà dell'oggetto che sia un valore di stringa o di convertire l'oggetto in una rappresentazione di stringa che sia desiderabile. Un'opzione potrebbe essere JSON.stringify
se vuoi effettivamente vedere il contenuto dell'oggetto.
Ho avuto questo errore quando ho cercato di visualizzare la proprietà createdAt
che è un oggetto Date. Se concateni .toString()
alla fine in questo modo, farà la conversione ed eliminerà l'errore. Sto solo postando questo come una possibile risposta nel caso in cui qualcun altro si sia imbattuto nello stesso problema:
{this.props.task.createdAt.toString()}
Grazie a un commento di zerkms, ho potuto notare il mio stupido errore:
Avevo onItemClick(e, item)
quando avrei dovuto avere onItemClick(item, e)
.