javascript - 通过 JSON 中的多个嵌套对象进行映射

Question

我正在使用 React 开发一个简单的项目，并且是 React 的新手，我在通过给定的 json 文件进行映射以将所需对象发送到不同组件时遇到了问题。

这是我得到的 JSON 文件(通过 api)

{
   "trees":{
      "name":"a",
      "age":"9",
      "height":"10",
      "location":"park"
   },
   "cars":{
      "name":"b",
      "age":"30",
      "height":"10",
      "location":"park"
   },
   "bikes":{
      "name":"c",
      "age":"110",
      "height":"10",
      "location":"park"
   },.........................

这是我在 App.js 中获取的 json。我的想法是将其完全发送到另一个组件(Data.js)，然后从 data.js 发送到另一个有树、汽车、自行车的组件。 即使在执行 const d = [jsonfile] 之后，我也无法在任何级别映射此 json 文件，即使在此之后我在映射时仍未定义。

App.js

const[Data,setData] = useState([]);

  useEffect(()=>{
    fetch('API-HERE').then((result)=>{result.json().then((resp)=>{
      setData(resp); 
    })})
  },[])

return (
    <div className="App">
      <DataFetched data={Data} />
    </div>
  );

在此之后，我无法在 DataFetched.js 中映射以将其发送给另一个 child ，只能将树木、汽车、自行车分开，以便可以读取它们的属性。

Answer 1

使用 Object.entries 迭代 JSON 属性。

你可以这样试试。

import React from "react";

const DataFetched = ({ data }) => {
    if (!data) {
        return null;
    }
    return Object.entries(data).map(
        ([key, { name, age, height, location }]) => {
            return (
                <div key={key}> 
                    <div>{name}</div>
                    <div>{age}</div>
                    <div>{height}</div>
                    <div>{location}</div>
                </div>
            );
        }
    );
};

export default DataFetched;

或者您可以从另一个子组件接收数据。

import React from "react";

const MyChildComponent = ({ data: { name, age, height, location } }) => {
    return (
        <div>
            <div>{name}</div>
            <div>{age}</div>
            <div>{height}</div>
            <div>{location}</div>
        </div>
    );
};

const DataFetched = ({ data }) => {
    if (!data) {
        return null;
    }
    return Object.entries(data).map(
        ([key, value]) => {
            return (
                <MyChildComponent data={value}/>
            );
        }
    );
};

export default DataFetched;