React中如何用Axios渲染GET请求响应数据至多个Div？

嘿，我太懂这种从jQuery转React的挫败感了——俩框架的思路完全不一样，jQuery是直接操DOM，React却是靠状态驱动视图，刚上手确实容易卡壳。咱们来一步步把你的问题解决掉！

首先，先看你的代码，你已经用Axios拿到数据并存到state里了，问题大概率出在渲染逻辑上。我给你补全并修正代码，再给你拆解关键点：

完整修正后的代码 #

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

class Table extends React.Component {
  constructor(props) {
    super(props);
    // 初始化状态：如果接口返回的是多条数据的数组，就用[]；如果是单条对象，就用{}
    this.state = {
      data: []
    };
  }

  componentDidMount() {
    axios
      .get('http://server.noorsoft.ru:9022/api/records')
      .then((response) => {
        // 这里要确认接口返回的结构：你之前写的({ data })是解构response.data，然后取data.data
        // 所以要确保接口返回的是类似 { data: [{}, {}] } 的格式
        this.setState({ data: response.data.data });
      })
      .catch((error) => {
        // 千万别忘了加错误处理！不然请求失败了你根本找不到原因
        console.error('加载数据出错啦:', error);
      });
  }

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

    // 数据还没加载完成时，显示加载提示（避免渲染undefined报错）
    if (data.length === 0) {
      return <div>正在加载数据...</div>;
    }

    // 如果接口返回的是多条记录的数组，用map遍历渲染每个条目
    return (
      <div className="records-list">
        {data.map((record, index) => (
          // 每个子元素必须加唯一key，优先用接口返回的id，这里先用index凑活
          <div key={index} className="record-item">
            <div>名字：<strong>{record.firstname}</strong></div>
            <div>姓氏：<strong>{record.lastname}</strong></div>
            <hr />
          </div>
        ))}
      </div>
    );

    // ===== 如果接口返回的是单条数据（不是数组），就用下面这段渲染代码 =====
    // return (
    //   <div className="single-record">
    //     <div>名字：{data.firstname}</div>
    //     <div>姓氏：{data.lastname}</div>
    //   </div>
    // );
  }
}

export default Table;

关键知识点拆解 #

1. 状态驱动视图：React不像jQuery那样直接去改DOM内容，你只需要把数据存在state里，当你调用setState更新状态后，React会自动重新渲染对应的DOM部分——这是和jQuery最大的区别，别再想着找DOM元素改内容啦！

2. 条件渲染：数据加载需要时间，在请求完成前data是空的，直接渲染record.firstname会报错，所以加个判断，先显示加载提示。

3. 数组遍历渲染：如果接口返回多条数据，用map遍历数组，每个元素生成一个对应的div。注意每个子元素必须加key，这是React用来识别元素变化的标记，最好用每条数据的唯一ID（比如record.id），实在没有再用index。

4. 错误处理：Axios请求一定要加catch，不然网络故障或者接口返回错误时，你根本不知道哪里出问题，排查起来会很头疼。

最后再提醒你：先在then里加个console.log(response.data)，看看接口返回的数据结构到底是什么样的——比如是不是真的在data.data里，是数组还是单个对象，这一步很重要，很多时候渲染不出来都是因为数据结构搞混了！

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