類型錯誤：undefined 不是 object（評估“item.name”）

Question

我使用 Draxview 處理兩個列表之間的拖放。 總的來說它工作得很好，但有時會崩潰並顯示錯誤消息：

• 類型錯誤：undefined 不是 object（評估“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 === null? '': item.name只需將其替換為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);
        }}
      />
    );
  }