我正在尝试构建一个 TreeView 组件以响应,其中根据用户展开的节点获取树的数据。
问题
我想用来 self 的服务器的数据替换 handleChange
中的代码,以便我将获取的数据附加到 tree
状态。我如何通过 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>
);
}
最佳答案
如果我没理解错的话,您想将 API 调用的“假”setTimeout
实现替换为使用 fetch
的真实调用。
在这种情况下,就像在 handleChange
处理程序中调用 fetch
并使用返回的新项更新状态一样简单。
function FileSystemNavigator() {
const initialData = {...}
const [tree, setTree] = React.useState(initialData)
const handleChange = (event, nodeId) => {
const handleResult = (data) => {
const items = data.children.map(item => {
return { id: item.id, label: item.name }
})
setTree({
root: [...tree.root, ...items]
})
}
const handleError = (error) => {
// handle errors appropriately
console.error(error.message)
}
fetch("https://api.myjson.com/bins/1aqhsc")
.then(res => res.json())
.then(handleResult)
.catch(handleError)
}
// ...
return (...)
}
这应该可以解决问题。
请注意,我使用了您在评论中提供的示例 API 端点,因此您必须更改 handleChange
处理程序中的 handleResult
回调以确保您正确解析新数据。
如果您想看一个简单的示例,我创建了一个带有按钮的 CodeSandbox
,单击该按钮可以获取更多数据并将其显示在列表中:
- > Demo
如果您有任何问题,请告诉我。
关于javascript - 附加获取的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59523032/