Bileşenimin render fonksiyonunda var:
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>
);
}
her şey düzgün çalışıyor, ancak <li>
öğesine tıkladığımda aşağıdaki hatayı alıyorum:
Yakalanmamış Hata: Değişmez İhlali: Nesneler bir React olarak geçerli değil child (bulundu: {dispatchConfig, dispatchMarker anahtarlarına sahip nesne, 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}). Bir çocuk koleksiyonu oluşturmak istiyorsanız, bunun yerine bir dizi kullanın veya nesneyi createFragment(object) kullanarak React eklentileri. Hoş Geldiniz`in render yöntemini kontrol edin.
Map fonksiyonu içindeki this.onItemClick.bind(this, item)
ifadesini (e) => onItemClick(e, item)
olarak değiştirirsem her şey beklendiği gibi çalışıyor.
Birisi neyi yanlış yaptığımı ve neden bu hatayı aldığımı açıklayabilirse harika olur
GÜNCELLEME 1: onItemClick fonksiyonu aşağıdaki gibidir ve this.setState'in kaldırılması hatanın ortadan kalkmasına neden olur.
onItemClick(e, item) {
this.setState({
lang: item,
});
}
Ancak bu bileşenin durumunu güncellemem gerektiğinden bu satırı kaldıramıyorum
Bu hatayı alıyordum ve JSX koduma istemeden bir dize değeri olmasını beklediğim bir Nesne dahil ettiğim ortaya çıktı:
return (
<BreadcrumbItem href={routeString}>
{breadcrumbElement}
</BreadcrumbItem>
)
breadcrumbElement
eskiden bir string idi, ancak bir refactor nedeniyle bir Object haline geldi. Ne yazık ki, React'ın hata mesajı beni sorunun olduğu satıra yönlendirmede iyi bir iş çıkarmadı. Bir bileşene aktarılan "props"'u tanıyana kadar yığın izimi sonuna kadar takip etmek zorunda kaldım ve sonra rahatsız edici kodu buldum.
Ya nesnenin dize değeri olan bir özelliğine başvurmanız ya da Nesneyi arzu edilen bir dize temsiline dönüştürmeniz gerekir. Nesnenin içeriğini gerçekten görmek istiyorsanız JSON.stringify
bir seçenek olabilir.
Bu yüzden, bir Date nesnesi olan createdAt
özelliğini görüntülemeye çalışırken bu hatayı aldım. Sonuna .toString()
eklerseniz, dönüştürme işlemini yapar ve hatayı ortadan kaldırır. Bunu, aynı sorunla karşılaşan başka biri olması ihtimaline karşı olası bir yanıt olarak gönderiyorum:
{this.props.task.createdAt.toString()}
Zerkms'in bir yorumu](https://stackoverflow.com/questions/33117449/invariant-violation-objects-are-not-valid-as-a-react-child/33118025#comment54048780_33117449) sayesinde aptalca hatamı fark edebildim:
onItemClick(e, item)olması gerekirken
onItemClick(item, e)` vardı.