如何运行嵌套 React map function？

Question

我有一个 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>
                      </>;
                    })
                  )
                : ""}

Answer 1

使用Object.values()获取所有值的数组，然后使用[0]获取第一个 object，您可以在其中根据需要访问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)

Answer 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>
  );
};