TypeError: undefined is not an object (evaluating 'item.name')

Question

我使用 Draxview 处理两个列表之间的拖放。总的来说它运行完美，但有时会崩溃并显示错误消息：

TypeError: undefined 不是对象（正在计算 'item.name'）*

这是在两个列表之间来回拖动可拖动项目的时候。但它不是每次都发生。有人知道我应该做什么吗？

这是我的代码：

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

Answer 1

只要项目未定义，就会发生此错误。您可以使用可选链接解决此问题。所以无论你在哪里使用 item.name === null ? '' : item.name 只需将其替换为 item?.name || ''

您更新后的代码将是：

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

TypeError: undefined is not an object (evaluating 'item.name')

TypeError: undefined is not an object (evaluating 'item.name')

javascript

drag-and-drop

draggable

react-native