通过 JSON 中的多个嵌套对象进行映射答案

【问题标题】：Mapping through multiple nested objects in JSON通过 JSON 中的多个嵌套对象进行映射
【发布时间】：2022-01-16 19:36:35
【问题描述】：

我正在使用 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 中进行映射，以将其单独发送给另一个只有树、汽车、自行车的孩子，以便可以读取它们的属性。

【问题讨论】：

您想将它们作为平面数组发送到DataFetched 组件吗？
是的，从 DataFetched 到孩子，这样我就可以在那个孩子身上分别读取树木、汽车、自行车……这样我就可以在那个孩子身上使用 trees.name 等。
映射是什么意思？你能写一个映射数据的例子吗？基本上，您应该编写一个循环来读取数据并为每个索引呈现相同的组件
const samplerecipes = [{ id: 1, name: "Pasta", cookingTime: 90, }, { id: 2, name: "Curry", cookingTime: 40, }]
重复问题：https://stackoverflow.com/questions/44309300/iterating-over-json-in-react

标签： javascript reactjs json

【解决方案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;

【讨论】：

谢谢 .. 但问题是有 100 多个像树车这样的物体，所以为所有人制作箱子是不可行的，而且我只想为树车生一个孩子...... .. 而不是像这样的多个孩子
我知道了。我会更新答案
@VATSAL JAIN，更新了答案！
你能告诉我如何在我的子组件中接收这些数据吗？
@VATSAL JAIN，您可以将数据传递给另一个组件。更新了答案。