React中react-data-table内TreeNode组件onClick事件失效问题

架构老林

2026-7-4

问题解决：react-data-table中TreeNode点击事件失效

问题原因

核心问题出在不稳定的组件key值：

FolderTree渲染TreeNode时，使用了node.id + Math.floor(Math.random() * 10000)作为key，每次组件渲染都会生成新的随机数，导致React持续销毁并重建TreeNode实例。
频繁的组件重建会导致事件绑定失效、状态丢失，而react-data-table的行渲染机制（如虚拟滚动、重渲染优化）会放大这个问题，表格外渲染频率低所以问题不明显。
另外，NetworkSharesTree中生成node.id时添加随机数的操作完全多余，反而破坏了id的稳定性。

解决方案

1. 修复FolderTree的key值

使用稳定且唯一的node.id作为key，移除随机数：

import React from "react";
import TreeNode from "./TreeNode";
const FolderTree = ({ data }) => {
  return (
    <div>
      {data.map((node) => (
        <TreeNode
          key={node.id} // 仅使用稳定的node.id
          node={node}
        />
      ))}
    </div>
  );
};

export default FolderTree;

2. 生成稳定的node.id

修改NetworkSharesTree中convertToArboristFormat函数的id生成逻辑，确保每个节点id唯一且固定：

const newItem = {
  // 用path（天然唯一）或name+索引组合生成稳定id
  id: item.path ? item.path : `${item.name}-${index}`,
  name: item.path ? item.path : item.name,
  children: item?.type === "directory" ? [] : null,
};