如何运行嵌套的 React 地图功能？

【问题标题】：How to run nested React map function?如何运行嵌套的 React 地图功能？
【发布时间】：2022-12-09 21:47:11
【问题描述】：

我有一个 JSON，我需要获取数据并在 UI 中显示，但由于嵌套而无法执行。

JSON数据：

data =[
  {
        "First Row": {
            "info": 274.176,
        }
    },
    {
        "Second Row": {
            "info": 139.536,
        }
    }
]

我的代码：

{data
                ? data.map((val, i) =>
                    val[i].map((val2) => {
                      <>
                        <div>{val2.info}</div>
                      </>;
                    })
                  )
                : ""}

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

使用Object.values() 获取所有值的数组，然后使用[0] 获取第一个对象，您可以根据需要在其中访问info：

data.map((val, i) => Object.values(val)[0].info)

[
  274.176,
  139.536
]

const data = [
    { "First Row": { "info": 274.176, } },
    { "Second Row": { "info": 139.536, } }
];

const r = data.map((val, i) => Object.values(val)[0].info);
console.log(r)

【讨论】：

非常感谢它工作正常...

【解决方案2】：

如果只想显示信息值，可以执行以下操作。它循环遍历数据数组。对于每个项目，获取第一个键的值。（假设每个项目只有一把钥匙）

const DataDisplay = ({ data }) => {
  return (
    <div>
      {data.map((item, index) => {
        return (
          <div key={index}>
            <h3>{Object.keys(item)[0]}</h3>
            <div>{Object.values(item)[0].info}</div>
          </div>
        );
      })}
    </div>
  );
};

【讨论】：