使用DraxView实现双列表拖拽偶现item.name undefined报错如何解决

报错的核心原因是渲染DragUIComponent或ReceivingZoneUIComponent时，传入的item参数为undefined，你现有代码只判断了item.name是否为null，没有覆盖item本身不存在的场景，所以会偶现崩溃。

修复&排查步骤 #

• 先做紧急崩溃防护，所有读取item.name的位置替换为更安全的空值判断写法：
  把{item.name === null ? '' : item.name}改成{item?.name ?? ''}，哪怕item为undefined也不会触发报错，先解决崩溃问题。
• 修复状态异步更新导致的脏数据问题：
  你现有拖拽交换逻辑中，直接读取了当前闭包中的receivingItemList、dragItemMiddleList状态快照，快速来回拖拽时React状态异步更新，会导致你读取的列表不是最新值，赋值后可能在列表中插入undefined项。
  把所有状态更新改为函数式写法，拿最新的状态快照操作：

  onReceiveDragDrop={(event) => {
    const payload = event.dragged.payload;
    // 更新接收列表用函数式写法取最新值
    setReceivedItemList(prevReceiving => {
      const newReceiving = [...prevReceiving];
      // 先判断索引是否合法，避免payload超出数组长度取到undefined
      const selectedItem = dragItemMiddleList[payload];
      if (!selectedItem) return prevReceiving;
      newReceiving[index] = selectedItem;
      return newReceiving;
    });
    // 更新拖拽列表也用函数式写法，同时取最新的接收列表值做交换
    setDragItemListMiddle(prevDrag => {
      const newDrag = [...prevDrag];
      setReceivedItemList(prevReceiving => {
        newDrag[payload] = prevReceiving[index];
        return prevReceiving;
      });
      return newDrag;
    });
  }}
  

• 替换错误的key值写法：
  你现有两个组件都用index当key，拖拽交换后列表项索引变化，用index当key会导致React错误复用组件实例，可能读取到旧的、甚至不存在的item数据。建议给每个列表项加唯一的业务id，key替换为item.id。
• 替换索引为唯一id做拖拽标识：
  你现在dragPayload传的是当前元素的索引，拖拽过程中如果原列表顺序已经变化，旧的索引对应的元素可能已经不存在，会取到undefined。建议dragPayload传递item.id，后续取值时用id去数组中过滤查找对应项，不要依赖索引取值。
• 加辅助日志定位根因：
  在两个组件的开头打印传入的item、index参数，崩溃时查看日志即可确认是哪一个位置的列表出现了undefined项，对应回溯操作路径就能定位具体出问题的逻辑。

内容的提问来源于stack exchange，提问作者Alexander