Javascript 附加获取的数据

我试图在react中构建一个treeview组件，其中基于用户扩展的节点获取树的数据

问题

我想用来自服务器的数据替换

handleChange

中的代码，以便将获取的数据附加到

树

状态。如何使用react实现这一点

我得到的数据可以如下所示：

{
  "children": [
    {
      "id": "2212",
      "parentId": "3321",
      "name": "R&D",
      "address": "homestreet"
    },
    {
      "id": "4212",
      "parentId": "3321",
      "name": "Testing",
      "address": "homestreet"
    }
  ]
}

我的代码

import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import TreeView from "@material-ui/lab/TreeView";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
import TreeItem from "@material-ui/lab/TreeItem";

const useStyles = makeStyles({
  root: {
    height: 216,
    flexGrow: 1,
    maxWidth: 400
  }
});

export default function FileSystemNavigator() {
  const classes = useStyles();

  const initialData = {
    root: [
      {
        id: "1",
        label: "Applications"
      }
    ],
  };

  const [tree, setTree] = useState(initialData);

  const handleChange = (event, nodeId) => {
    setTimeout(() => {
      const newTree = {
        ...tree,
        [nodeId]: [
          {
            id: "2",
            label: "Calendar"
          },
          {
            id: "3",
            label: "Settings"
          },
          {
            id: "4",
            label: "Music"
          }
        ]
      };

      setTree(newTree);
    }, 1000); // simulate xhr
  };

  const renderTree = children => {
    return children.map(child => {
      const childrenNodes =
        tree[child.id] && tree[child.id].length > 0
          ? renderTree(tree[child.id])
          : [<div />];

      return (
        <TreeItem key={child.id} nodeId={child.id} label={child.label}>
          {childrenNodes}
        </TreeItem>
      );
    });
  };

  return (
    <TreeView
      className={classes.root}
      defaultCollapseIcon={<ExpandMoreIcon />}
      defaultExpandIcon={<ChevronRightIcon />}
      onNodeToggle={handleChange}
    >
      {renderTree(tree.root)}
    </TreeView>
  );
}

import React，{useState}来自“React”；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/lab/TreeView”导入TreeView；
从“@material ui/icons/ExpandMore”导入ExpandMoreIcon；
从“@material ui/icons/ChevronRight”导入ChevronRightIcon；
从“@material ui/lab/TreeItem”导入TreeItem；
const useStyles=makeStyles({
根目录：{
身高：216，
flexGrow:1，
最大宽度：400
}
});
导出默认函数FileSystemNavigator（）{
const classes=useStyles（）；
常量初始数据={
根目录：[
{
id:“1”，
标签：“应用程序”
}
],
};
const[tree，setTree]=useState（initialData）；
常量handleChange=（事件，节点ID）=>{
设置超时（（）=>{
常数newTree={
…树，
[nodeId]：[
{
id:“2”，
标签：“日历”
},
{
id:“3”，
标签：“设置”
},
{
id:“4”，
标签：“音乐”
}
]
};
setTree（newTree）；
}，1000）；//模拟xhr
};
const renderTree=children=>{
返回children.map（child=>{
常量子节点=
树[child.id]&&tree[child.id]。长度>0
？renderTree（树[child.id]）
: [];
返回(
{childrenNodes}
);
});
};
返回(
{renderTree（tree.root）}
);
}

如果我理解正确，您希望使用

fetch

将API调用的“假”

setTimeout

实现替换为真实调用

在这种情况下，只需在

handleChange

处理程序中调用

fetch

，并使用返回的新项更新状态即可

函数FileSystemNavigator（）{
常量initialData={…}
const[tree，setTree]=React.useState（initialData）
常量handleChange=（事件，节点ID）=>{
常量handleResult=（数据）=>{
const items=data.children.map（item=>{
返回{id:item.id，label:item.name}
})
刚毛树({
root:[…tree.root，…项]
})
}
常量句柄错误=（错误）=>{
//适当地处理错误
console.error（error.message）
}
取回（“https://api.myjson.com/bins/1aqhsc")
.then（res=>res.json（））
.然后（handleResult）
.catch（把手错误）
}
// ...
返回（…）
}

这应该能奏效

请注意，我使用了您在注释中提供的示例API端点，因此您必须更改

handleChange

处理程序内部的

handleResult

回调，以确保正确解析新数据

如果您想看一个简单的示例，我创建了一个

CodeSandbox

，其中有一个按钮，可以单击该按钮获取更多数据并将其显示在列表中：

---

如果您有任何问题，请告诉我。

您面临什么困难？你能用API请求显示实际的代码吗？（例如，

fetch（…）

）您是否在询问如何用对API端点的

fetch

请求替换

setTimeout

？是的，我面临着用从API中提取来替换

setTimeout

的困难，以便它正确映射到数据结构，如

newTree

。我制作了一个返回JSON的假后端：@John请看下面我的答案，如果您有任何问题，请告诉我。@John您还有问题吗？谢谢！这就是我要找的