Json React Material UI树查看prp类型'；nodeID'；已按要求标记

我遇到以下问题

Warning: Failed prop type: The prop `nodeId` is marked as required in `ForwardRef(TreeItem)`, but its value is `undefined`.
in ForwardRef(TreeItem) (created by WithStyles(ForwardRef(TreeItem)))
in WithStyles(ForwardRef(TreeItem)) (at Treeview.js:77)
in ul (created by ForwardRef(TreeView))
in ForwardRef(TreeView) (created by WithStyles(ForwardRef(TreeView)))
in WithStyles(ForwardRef(TreeView)) (at Treeview.js:84)
in CustomizedTreeView (at Inbox.js:97)
in div (created by ForwardRef(Paper))
in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
in WithStyles(ForwardRef(Paper)) (at Inbox.js:93)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at Inbox.js:92)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at Inbox.js:91)
in div (at Inbox.js:90)
in Inbox (created by WithStyles(Inbox))
in WithStyles(Inbox) (created by Context.Consumer)
in Route (at App.js:18)
in Switch (at App.js:14)
in main (at App.js:13)
in App (at src/index.js:26)
in Router (created by BrowserRouter)
in BrowserRouter (at src/index.js:24)

我在rendering类中的代码如下所示：

class Inbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Folder: [],
      loading: true,
    };
  }


  componentDidMount() {
    this.loading = false;
    getFolder().then((result) => this.setState({ Folder: result }));
    this.setState({ folderstate: true });
  }

  render() {
    const { classes } = this.props;
    const { Folder, folderstate } = this.state;
    return (
      <div className="Inbox">
        <Grid wrap="wrap" container>
          <Grid item xs={3}>
            <Paper className={classes.paper}>
              <Typography>Ordner Struktur:</Typography>
              <Divider />

              {folderstate ? <Tree data={Folder} /> : <h1> Loading </h1>}

              <Divider />
              <Button>Aktualisieren</Button>
            </Paper>
            <Grid item xs={5}>
              <Paper className={classes.paper}></Paper>
            </Grid>
          </Grid>
        </Grid>
      </div>
    );
  }
}

并尝试在树状视图中解析此内容：

export default function CustomizedTreeView(props) {
  const classes = useStyles();

  const renderTree = (nodes) => (
    <TreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name}>
      {Array.isArray(nodes.children)
        ? nodes.children.map((node) => renderTree(node))
        : null}
    </TreeItem>
  );
  return (
    <TreeView
      className={classes.root}
      defaultExpanded={["1"]}
      defaultCollapseIcon={<MinusSquare />}
      defaultExpandIcon={<PlusSquare />}
      defaultEndIcon={<CloseSquare />}
    >
      {renderTree(props.data)}
    </TreeView>
  );
}

树视图呈现为例外。不幸的是，我不是从RESTAPI获得的数据，因为我对Javascript相当陌生，希望你们中一些优秀的家伙能帮助我：）

export default function CustomizedTreeView(props) {
  const classes = useStyles();

  const renderTree = (nodes) => (
    <TreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name}>
      {Array.isArray(nodes.children)
        ? nodes.children.map((node) => renderTree(node))
        : null}
    </TreeItem>
  );
  return (
    <TreeView
      className={classes.root}
      defaultExpanded={["1"]}
      defaultCollapseIcon={<MinusSquare />}
      defaultExpandIcon={<PlusSquare />}
      defaultEndIcon={<CloseSquare />}
    >
      {renderTree(props.data)}
    </TreeView>
  );
}

const data = {
  id: "1",
  name: "Parent",
  children: [
    {
      id: "2",
      name: "Child - 1",
    },
    {
      id: "3",
      name: "Child - 3",
      children: [
        {
          id: "4",
          name: "Child - 4",
        },
      ],
    },
  ],
};