React .filter/.map "Cannot read property 'handleClick' of undefined"?
Guten Abend,
ich mach eine kleine Function in JS und React und hab ein Fehler den ich nicht verstehe:
In dem Codestück funktioniert es aber der ist nicht so wie ich es brauche. Hier findet er aber die Funktion, bei dem unteren der was die Command handleClick funktion betrifft. Findet er sie nicht
let itemList = this.props.items.map(item => {
console.log(item.id);
return (
<FoodCategoryItem
preis={item.price}
label={item.title}
text={item.desc}
key={item.id}
Command={() => { this.handleClick(item.id) }}
source={item.img} />
)
})
und mit diesem gibt es fehler das die handeclick function undefined ist
let itemList = this.props.items.filter(function (item) {
return item.menuid === 'menuid_salat_2222';
}).map(function ({ id, title, desc, price, img }) {
console.log((id))
return (
<FoodCategoryItem
preis={price}
label={title}
text={desc}
key={id}
Command={() => { this.handleClick(id) }}
source={img} />
)
});
Also die Items sollen gefiltert werden funktioniert auch aber dann funktioniert der Command mit handleclick nicht mehr
diese Fehlermeldung kommt dann:
TypeError: Cannot read property 'handleClick' of undefined
2 Antworten
Naja, die Meldung sagt einfach nur aus, dass du "handleClick" auf einem nicht existierenden Objekt ausführen willst. Kenne kein React, aber du könntest dir halt angucken wann wo welche Objekte überhaupt existieren bevor so ein handleClick ausgeführt wird.
Im unteren Code-Snippet bezieht sich this auf das function-Objekt, aber handleClick ist sicherlich in dem Objekt definiert, in dem das gesamte Snippet liegt.
Ich denke, wenn du für den Callback einen Lambda-Ausdruck nutzt, sollte sich das Problem auflösen.
Statt:
.map(function ({ id, title, desc, price, img }) {
also:
.map(({ id, title, desc, price, img }) => {