如何在React中正确地编写表映射列表？

import React, { Component } from 'react';

class TableList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [] // 列表数据数组
    };
  }

  componentDidMount() {
    // 通过网络请求或其他方式获取列表数据
    // 并将数据存储到state中
    fetchData().then(data => {
      this.setState({ data });
    });
  }

  render() {
    const { data } = this.state;

    return (
      <table>
        <thead>
          <tr>
            <th>名称</th>
            <th>年龄</th>
            <th>性别</th>
          </tr>
        </thead>
        <tbody>
          {data.map(item => (
            <tr key={item.id}>
              <td>{item.name}</td>
              <td>{item.age}</td>
              <td>{item.gender}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

export default TableList;