如何在带有给定数据的React组件中使用嵌套映射

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        category1: [
          { id: 1, name: 'Item 1' },
          { id: 2, name: 'Item 2' },
        ],
        category2: [
          { id: 3, name: 'Item 3' },
          { id: 4, name: 'Item 4' },
        ],
      },
    };
  }

  render() {
    return (
      <div>
        {/* 嵌套映射 */}
      </div>
    );
  }
}

export default MyComponent;

render() {
  return (
    <div>
      {Object.keys(this.state.data).map((category) => (
        <div key={category}>
          <h2>{category}</h2>
          {this.state.data[category].map((item) => (
            <div key={item.id}>{item.name}</div>
          ))}
        </div>
      ))}
    </div>
  );
}

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';

ReactDOM.render(<MyComponent />, document.getElementById('root'));