我有一个这样的数组结构：

const array = [
    [
        {
            "item": { "name": "item1" },
            "property": { "name": "property1" }
        },
        {
            "item": { "name": "item2" },
            "property": { "name": "property2" }
        }
    ],
    [
        {
            "item": { "name": "item3" },
            "property": { "name": "property3" }
        }
    ]
]

如果我在纯 Javascript 中运行此命令：

let count = 0
for(let i = 0; i < array.length; i++) {
    for(let j = 0; j < array[i].length; j++) {
        count ++
        console.log(count)
    }
}

然后输出将是这样的：

1,2,3

我希望能够array.map()在 ReactJS 中使用像上面那样生成输出并保留这些部分。这是我目前使用的代码：

return (
    <div className="container">
    {array.map((nestedArray, arrayIndex) => (
        <div key={arrayIndex} className="array-list">
            <h1>Group: {arrayIndex+1}</h1>
            {nestedArray.map((items, nestedArrayIndex) => (
                <p>Item: {nestedArrayIndex+1}</p>
            ))}
        </div>
    ))}
    </div>
)

这是渲染输出（使用我的 css 样式）：

什么是有效且简短的方法？

我希望我已经清楚地解释了一切

回答

const array=[[{item:{name:"item1"},property:{name:"property1"}},{item:{name:"item2"},property:{name:"property2"}}],[{item:{name:"item3"},property:{name:"property3"}}]];

function Example({ data }) {

  function createJSX(data) {

    let count = 0;

    return array.map((arr, i) => {
      return (
        <div>
          <h3>Group: {i + 1}</h3>
          {arr.map(obj => {
            ++count;
            return <p>Item: {count}</p>;
          })}
        </div>
      )
    });

  }

  return (
    <div>
      {createJSX()}
    </div>
  );

};

// Render it
ReactDOM.render(
  <Example data={array} />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
    <div></div>

return (
  <div className="container">
    {createJSX()}
  </div>
);