为什么我无法在render部分的ReactJs Datatables中接收axios的结果

import React, { Component } from 'react';
import axios from 'axios';

class DataTable extends Component {
  state = {
    data: [],
    isLoading: true
  };

  componentDidMount() {
    axios.get('http://example.com/api/data')
      .then(response => {
        this.setState({
          data: response.data,
          isLoading: false
        });
      })
      .catch(error => {
        console.log(error);
        this.setState({ isLoading: false });
      });
  }

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

    if (isLoading) {
      return <div>Loading...</div>;
    }

    return (
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
          </tr>
        </thead>
        <tbody>
          {data.map(item => (
            <tr key={item.id}>
              <td>{item.id}</td>
              <td>{item.name}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

export default DataTable;