React中使用Axios配合isLoaded加载数据无法渲染表格问题求解

你代码中存在3个可直接导致功能异常的问题：

• 重复导入React模块：代码顶部同时声明了两次React相关导入语句，会触发语法报错
• Axios响应取值错误：Axios返回的响应对象中，接口实际数据存放在response.data属性下，原代码直接使用未定义的data变量赋值，未正确提取接口返回数据
• 初始数据类型错误：listData初始值被设置为空对象{}，但后续渲染时调用了仅数组支持的map方法，会触发类型报错
  另外建议补充Axios请求的异常捕获逻辑，避免请求出错时页面一直停留在加载状态。

import React, { Component } from 'react';
import './style.css';
import axios from 'axios';

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      isLoaded: false,
      listData: []
    };
  }

  componentDidMount() {
    axios
      .get('https://jsonplaceholder.typicode.com/comments?postId=1')
      .then(response =>
        this.setState({
          isLoaded: true,
          listData: response.data
        })
      )
      .catch(err => console.log(err));
  }

  render() {
    const { isLoaded, listData } = this.state;

    if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <>
          <table className="table">
            <thead>
              <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Email</th>
              </tr>
            </thead>
            <tbody>
              {listData.map(item => {
                return (
                  <tr key={item.id.toString()}>
                    <td>{item.id}</td>
                    <td>{item.name}</td>
                    <td>{item.email}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </>
      );
    }
  }
}

内容的提问来源于stack exchange，提问作者HelloWorld1