TypeError：未定义不是一个对象（评估'item.name'）答案

【问题标题】：TypeError: undefined is not an object (evaluating 'item.name')TypeError：未定义不是一个对象（评估'item.name'）
【发布时间】：2021-09-29 19:57:33
【问题描述】：

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

TypeError: undefined is not an object (evalating '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);
        }}
      />
    );
  }

【问题讨论】：

您提供的代码中有几个地方引用了 item.name。在那些检查 item 是否不为空的地方的代码中添加保护不是更容易吗？
您在哪个组件中收到错误？实例化组件时，您似乎没有传递或错误传递 item 道具。但是，我在您的代码中看不到该部分。
正如@ErnestoStifano 所暗示的那样，您可以在调用这些函数的位置添加minimal reproducible example 吗？

标签： javascript react-native drag-and-drop draggable

【解决方案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);
        }}
      />
    );
  }

【讨论】：