Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

384
Views
TypeError: indefinido no es un objeto (evaluando 'item.name')

Uso Draxview para manejar arrastrar y soltar entre dos listas. En general, funciona perfectamente, pero a veces falla con un mensaje de error:

  • TypeError: undefined no es un objeto (evaluando 'item.name') *

Es cuando arrastra el elemento arrastrable de un lado a otro entre las dos listas. Pero no sucede siempre. ¿Alguien tiene idea de lo que debo hacer?

Aquí está mi código:

 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); }} /> ); }
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Este error ocurrirá siempre que el elemento no esté definido. Puede resolver esto usando el encadenamiento opcional. Entonces, ¿dónde haya usado item.name === null ? '' : item.name simplemente reemplácelo con item?.name || ''

Su código actualizado será:

 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); }} /> ); }
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!