无法在reactjs中创建树视图

Question

我正在尝试在 React.js 中创建一个树视图。但我无法正确设置它。下面是我的代码

App.js

import React from "react";
import TreeHierarchy from "./TreeHierarchy"; // Adjust path if necessary

const App = () => {
return (
<div style={{ padding: "20px" }}>
  <h1>Bahria Hierarchy</h1>
  <TreeHierarchy />
</div>
);
};

export default App;

TreeHierarchy.js

import React from "react";
import { TreeView, TreeItem } from "@mui/x-tree-view";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";

// Sample hierarchy
const hierarchy = {
name: "Bahria",
precincts: [
{
  name: "Precinct-1",
  streets: [
    {
      name: "Road 1",
      meters: ["3092000001", "3092000210"],
    },
    {
      name: "Street 21",
      meters: ["3092000012"],
    },
    ],
    },
    ],
 };

// Recursive function to render the hierarchy tree
const TreeHierarchy = () => {
const renderTree = (node, parentId = "") => {
const nodeId = `${parentId}-${node.name || "node"}`;

return (
  <TreeItem key={nodeId} nodeId={nodeId} label={node.name || "Unnamed"}>
    {node.streets &&
      node.streets.map((street, index) =>
        renderTree(street, `${nodeId}-street-${index}`)
      )}
    {node.precincts &&
      node.precincts.map((precinct, index) =>
        renderTree(precinct, `${nodeId}-precinct-${index}`)
      )}
    {node.meters &&
      node.meters.map((meter, index) => (
        <TreeItem
          key={`${nodeId}-meter-${index}`}
          nodeId={`${nodeId}-meter-${index}`}
          label={`Meter: ${meter}`}
        />
      ))}
  </TreeItem>
);
};

return (
<TreeView
  defaultCollapseIcon={<ExpandMoreIcon />}
  defaultExpandIcon={<ChevronRightIcon />}
>
  {renderTree(hierarchy)}
</TreeView>
);
};

export default TreeHierarchy;

输出

当我单击主节点名称时，出现以下错误

MUI X: The Tree View component requires all items to have a unique `id` property.
Alternatively, you can use the `getItemId` prop to specify a custom id for each item.
Two items were provided with the same id in the `items` prop: "undefined"
Error: MUI X: The Tree View component requires all items to have a unique `id` property.
Alternatively, you can use the `getItemId` prop to specify a custom id for each item.
Two items were provided with the same id in the `items` prop: "undefined"
at http://localhost:3000/static/js/bundle.js:15169:15
at basicStateReducer (http://localhost:3000/static/js/bundle.js:37272:45)
at updateReducer (http://localhost:3000/static/js/bundle.js:37381:26)
at updateState (http://localhost:3000/static/js/bundle.js:37667:14)
at Object.useState (http://localhost:3000/static/js/bundle.js:38464:20)
at Object.useState (http://localhost:3000/static/js/bundle.js:54836:25)
at useTreeView (http://localhost:3000/static/js/bundle.js:16177:64)
at SimpleTreeView (http://localhost:3000/static/js/bundle.js:12473:83)
at renderWithHooks (http://localhost:3000/static/js/bundle.js:37072:22)
at updateForwardRef (http://localhost:3000/static/js/bundle.js:40321:24)

树结构如下

Bharia (Parent node)
  => Precinct (value)
      =>streets (value)
         => meters (value)

我坚持下去，一定错过了一些东西。任何帮助将不胜感激。

Answer 1

每个

TreeItem

都需要一个独特的

itemId

...如文档中所述。

这是尊重此要求的更改后的

renderTree

函数：

const renderTree = (node, parentId = "") => {
  const nodeId = `${parentId}-${node.name || "node"}`;

  return (
    <TreeItem
      key={nodeId}
      // itemId added here
      itemId={nodeId}
      nodeId={nodeId}
      label={node.name || "Unnamed"}
    >
      {node.streets &&
        node.streets.map((street, index) =>
          renderTree(street, `${nodeId}-street-${index}`)
        )}
      {node.precincts &&
        node.precincts.map((precinct, index) =>
          renderTree(precinct, `${nodeId}-precinct-${index}`)
        )}
      {node.meters &&
        node.meters.map((meter, index) => {
          // an `id` constant to avoid repeating code
          const id = `${nodeId}-meter-${index}`;
          return (
            <TreeItem
              key={id}
              // ...and another itemId here
              itemId={id}
              nodeId={`${nodeId}-meter-${index}`}
              label={`Meter: ${meter}`}
            />
          );
        })}
    </TreeItem>
  );
};

在上面的代码中，我为每个

itemId

添加了一个独特的

TreeItem

属性。
我还在

id

函数参数中添加了

node.meters.map(...)

常量，以避免重复模板字符串文字。