React从API获取json到const变量

Question

我有React应用程序从json中构建文件夹树结构:

Treelist页

const treeData = [{here is my json}];
const TreeList = () => {
return (
<>
<Header title="Tree Data Visualization" />
<ExternalInfo page="treeList" />
<div className="row">
<div className="col text-center">
<div className="row mt-3 d-flex justify-content-center">
<div className="col-lg-8 text-left text-dark">
<Tree data = {treeData}/>
</div>
</div>
</div>
</div>
</>
);
};
export default TreeList;

Treelist组件

const Tree = ({ data = [] }) => {
return (
<div className="d-tree">
<ul className="d-flex d-tree-container flex-column">
{data.map((tree) => (
<TreeNode node={tree} />
))}
</ul>
</div>
);
};
const TreeNode = ({ node }) => {
const [childVisible, setChildVisiblity] = useState(false);
const hasChild = node.elements ? true : false;
const hasChildelements = node.elements ? true : false;
const hasNodeDescription = node.description ? true : false;
return (
<li className="d-tree-node border-0">
<div className="d-flex" onClick={(e) => setChildVisiblity((v) => !v)}>
{hasChild && (
<div
className={`d-inline d-tree-toggler ${
childVisible ? "active" : ""
}`}
>
<FontAwesomeIcon icon="caret-right" />
</div>
)}
</li>
);
};
export default Tree;

这里的一切工作正常，直到我试图从API获得const json。我已经尝试了所有我能在网上找到的解决方案。示例API我尝试从:https://someapi.free.beeceptor.com/

Answer 1

您在第一个代码片段中提供给Tree组件的treeData似乎在您想要使用的API上具有不同的结构。你的treeData是一个数组但是API给你的是一个对象。您可以使用它的数组部分，即目录属性。