ReactJS如何在<tr>标签中渲染API返回的数组数据

首先，你的思路方向是对的，但在React场景里渲染列表，用数组的map方法会比手动for循环push更简洁，也更符合React的惯用写法。下面给你调整后的实现方案：

类组件版本 #

如果你的组件是类组件，可以通过维护state来管理接口数据，数据更新后组件会自动重新渲染：

class CourseTable extends React.Component {
  // 初始化状态存储课程数据
  state = {
    courses: []
  };

  componentDidMount() {
    const userid = this.props.match.params.userid;
    axios.get(`someapi?userid=${userid}`) // 记得带上userid参数
      .then((response) => {
        // 直接把接口返回的数组赋值给state，无需手动push
        this.setState({ courses: response.data });
      })
      .catch((error) => {
        // 别忽略请求失败的情况，这里可以加错误提示逻辑
        console.error('接口请求失败:', error);
      });
  }

  render() {
    const { courses } = this.state;
    return (
      <table>
        <tbody>
          {/* 用map遍历数组生成<tr>，必须给每个列表项加key */}
          {courses.map((course, index) => (
            <tr key={index}>
              <td>{course}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

函数组件版本（更推荐） #

如果是用Hook的函数组件，写法会更轻量化：

import { useState, useEffect } from 'react';
import axios from 'axios';

const CourseTable = (props) => {
  const [courses, setCourses] = useState([]);
  const userid = props.match.params.userid;

  // 组件挂载/用户ID变化时请求接口
  useEffect(() => {
    axios.get(`someapi?userid=${userid}`)
      .then((response) => {
        setCourses(response.data);
      })
      .catch((error) => {
        console.error('接口请求失败:', error);
      });
  }, [userid]);

  return (
    <table>
      <tbody>
        {courses.map((course, index) => (
          <tr key={index}>
            <td>{course}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

几个关键注意点： #

• key属性必须加：React依赖key来识别列表项的变化，避免不必要的重渲染。如果你的课程数据有唯一ID（比如课程ID），优先用唯一ID当key，比index更稳定；
• 无需手动循环push：接口返回的response.data本身就是你需要的数组，直接赋值给状态即可；
• 错误处理不能少：接口请求可能失败，加catch捕获错误能避免页面崩溃，也方便调试。

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