admin管理员组文章数量:1391955
I use Draxview to handle drag and drop between two lists. Overall It works perfectly, but sometimes it crashes with an error message:
- TypeError: undefined is not an object (evaluating 'item.name') *
It's when drag the the draggable item back and forth between the two lists. But it not happends every time. Do anyone have clue of what I should do?
Here is my code:
const DragUIComponent = ({ item, index }) => {
return (
<DraxView
style={[styles.centeredContent, styles.draggableBox]}
draggingStyle={styles.dragging}
dragReleasedStyle={styles.dragging}
hoverDraggingStyle={styles.hoverDragging}
dragPayload={index}
longPressDelay={150}
key={index}
>
<View style={styles.emptyView}>
<Text style={styles.textStyle}>{item.name === null ? '' : item.name}</Text>
</View>
</DraxView>
);
}
{HERE I GET THE ERROR}
//The Receiving Zone Where I drops my draggable element
const ReceivingZoneUIComponent = ({ item, index }) => {
return (
<DraxView
style={[styles.centeredContent, styles.receivingZone]}
receivingStyle={styles.receiving}
renderContent={({ viewState }) => {
try {
const receivingDrag = viewState && viewState.receivingDrag;
const payload = receivingDrag && receivingDrag.payload;
return (
<View style={styles.recView}>
<Text style={styles.textStyleeRceiving}>{item.name === null ? '' : item.name}</Text>
</View>
);
} catch (error) {
alert(error);
}
}}
key={index}
onReceiveDragDrop={(event) => {
let selected_item = dragItemMiddleList[event.dragged.payload];
console.log('onReceiveDragDrop::index', selected_item, index);
console.log('onReceiveDragDrop :: payload', event.dragged.payload);
let newReceivingItemList = [...receivingItemList];
console.log('onReceiveDragDrop :: newReceivingItemList', newReceivingItemList);
newReceivingItemList[index] = selected_item;
setReceivedItemList(newReceivingItemList);
let newDragItemMiddleList = [...dragItemMiddleList];
console.log('onReceiveDragDrop :: newDragItemMiddleList 1', newDragItemMiddleList);
newDragItemMiddleList[event.dragged.payload] = receivingItemList[index];
console.log('onReceiveDragDrop :: newDragItemMiddleList 2', newDragItemMiddleList);
setDragItemListMiddle(newDragItemMiddleList);
}}
/>
);
}
I use Draxview to handle drag and drop between two lists. Overall It works perfectly, but sometimes it crashes with an error message:
- TypeError: undefined is not an object (evaluating 'item.name') *
It's when drag the the draggable item back and forth between the two lists. But it not happends every time. Do anyone have clue of what I should do?
Here is my code:
const DragUIComponent = ({ item, index }) => {
return (
<DraxView
style={[styles.centeredContent, styles.draggableBox]}
draggingStyle={styles.dragging}
dragReleasedStyle={styles.dragging}
hoverDraggingStyle={styles.hoverDragging}
dragPayload={index}
longPressDelay={150}
key={index}
>
<View style={styles.emptyView}>
<Text style={styles.textStyle}>{item.name === null ? '' : item.name}</Text>
</View>
</DraxView>
);
}
{HERE I GET THE ERROR}
//The Receiving Zone Where I drops my draggable element
const ReceivingZoneUIComponent = ({ item, index }) => {
return (
<DraxView
style={[styles.centeredContent, styles.receivingZone]}
receivingStyle={styles.receiving}
renderContent={({ viewState }) => {
try {
const receivingDrag = viewState && viewState.receivingDrag;
const payload = receivingDrag && receivingDrag.payload;
return (
<View style={styles.recView}>
<Text style={styles.textStyleeRceiving}>{item.name === null ? '' : item.name}</Text>
</View>
);
} catch (error) {
alert(error);
}
}}
key={index}
onReceiveDragDrop={(event) => {
let selected_item = dragItemMiddleList[event.dragged.payload];
console.log('onReceiveDragDrop::index', selected_item, index);
console.log('onReceiveDragDrop :: payload', event.dragged.payload);
let newReceivingItemList = [...receivingItemList];
console.log('onReceiveDragDrop :: newReceivingItemList', newReceivingItemList);
newReceivingItemList[index] = selected_item;
setReceivedItemList(newReceivingItemList);
let newDragItemMiddleList = [...dragItemMiddleList];
console.log('onReceiveDragDrop :: newDragItemMiddleList 1', newDragItemMiddleList);
newDragItemMiddleList[event.dragged.payload] = receivingItemList[index];
console.log('onReceiveDragDrop :: newDragItemMiddleList 2', newDragItemMiddleList);
setDragItemListMiddle(newDragItemMiddleList);
}}
/>
);
}
- 1 There are a few places in the code you provided that reference item.name. Wouldn't it be easier to just add protection in the code in those places that checks if item is not null? – tomerpacific Commented Sep 29, 2021 at 20:01
-
1
In what ponent are you getting the error? It seems that you are not passing or wrongly passing
itemprop when instantiating your ponent. However, I can't see that part in your code. – Ernesto Stifano Commented Sep 29, 2021 at 20:01 - As @ErnestoStifano alluded, can you add the minimal reproducible example of where you're invoking these functions? – esqew Commented Sep 29, 2021 at 20:09
1 Answer
Reset to default 3This error will occur whenever item is undefined. You can solve this using optional chaining. So wherever you have used item.name === null ? '' : item.name just replace it with item?.name || ''
Your updated code will be:
const DragUIComponent = ({ item, index }) => {
return (
<DraxView
style={[styles.centeredContent, styles.draggableBox]}
draggingStyle={styles.dragging}
dragReleasedStyle={styles.dragging}
hoverDraggingStyle={styles.hoverDragging}
dragPayload={index}
longPressDelay={150}
key={index}
>
<View style={styles.emptyView}>
<Text style={styles.textStyle}>{item?.name || ''}</Text>
</View>
</DraxView>
);
}
{HERE I GET THE ERROR}
//The Receiving Zone Where I drops my draggable element
const ReceivingZoneUIComponent = ({ item, index }) => {
return (
<DraxView
style={[styles.centeredContent, styles.receivingZone]}
receivingStyle={styles.receiving}
renderContent={({ viewState }) => {
try {
const receivingDrag = viewState && viewState.receivingDrag;
const payload = receivingDrag && receivingDrag.payload;
return (
<View style={styles.recView}>
<Text style={styles.textStyleeRceiving}>{item?.name || ''}</Text>
</View>
);
} catch (error) {
alert(error);
}
}}
key={index}
onReceiveDragDrop={(event) => {
let selected_item = dragItemMiddleList[event.dragged.payload];
console.log('onReceiveDragDrop::index', selected_item, index);
console.log('onReceiveDragDrop :: payload', event.dragged.payload);
let newReceivingItemList = [...receivingItemList];
console.log('onReceiveDragDrop :: newReceivingItemList', newReceivingItemList);
newReceivingItemList[index] = selected_item;
setReceivedItemList(newReceivingItemList);
let newDragItemMiddleList = [...dragItemMiddleList];
console.log('onReceiveDragDrop :: newDragItemMiddleList 1', newDragItemMiddleList);
newDragItemMiddleList[event.dragged.payload] = receivingItemList[index];
console.log('onReceiveDragDrop :: newDragItemMiddleList 2', newDragItemMiddleList);
setDragItemListMiddle(newDragItemMiddleList);
}}
/>
);
}
本文标签： javascriptTypeError undefined is not an object (evaluating 39itemname39)Stack Overflow
版权声明：本文标题：javascript - TypeError: undefined is not an object (evaluating 'item.name') - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744755834a2623456.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论