Uso Draxview para manejar arrastrar y soltar entre dos listas. En general, funciona perfectamente, pero a veces falla con un mensaje de error:
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); }} /> ); }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); }} /> ); }