访问json返回未定义的反应js

Question

我正在尝试获取一些 json 数据以在 Ui 中显示，但是当我使用 map 方法对其进行迭代时，我一直未定义。任何帮助将不胜感激。这是代码沙箱上的链接https://codesandbox.io/s/late-wood-kx8w2?file=/src/App.js

Answer 1

这一行

const [items, setItem] = useState(Object.keys(trees));

将树键传递给 View 函数，而不是实际数据。我相信你的意思是传递数据。您的代码将 'name' 和 'children' 作为 {items} 传递，然后由 View.js 显示。

以下代码向您展示了如何解析树并获取名称和值。它不完整，但它应该让您开始了解如何进行遍历。

import React, { useState } from "react";

export default function Start(){
    const trees = {
      name: "root",
      children: [
        {
          name: "child1",
          children: [
            { name: "child1-child1", data: "c1-c1 Hello" },
            { name: "child1-child2", data: "c1-c2 JS" }
          ]
        },
        { name: "child2", data: "c2 World" }
      ]
    };

    const treesCopy = trees;

    function Traverse(tree){
        var treesCopy = tree;
        var str = [];
        for (var prop in treesCopy) {
            console.log(prop);
            if (prop=="children"){
                str = str + "name: "+ prop + ",";
                treesCopy = treesCopy[prop][0];
                // console.log('New tree: ',treesCopy);
                return str + Traverse(treesCopy);
                }
            str = str + "name: "+ prop +" value: " + treesCopy[prop]+",";
            }
        return str;
    };

    const str = Traverse(treesCopy);

    return(
    <>
    {
    str ? str.split(",").map(place => <p> {place} </p>) 
    : ""
    }
    </>
    )
}