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);
        }}
      />
    );
  }

CodePudding user response：

This 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);
        }}
      />
    );
  }