React函数组件中如何将API返回数据渲染到Material UI表格

代码错误点 #

• 接口返回数据取值错误：你调用的接口返回的加密货币列表存放在a.data.data字段中，原代码错误取了不存在的a.data.symbol字段，导致data状态始终是空值
• 表格渲染逻辑错误：MUI Table 要求严格的嵌套结构，原代码直接在Table下遍历columns输出div，不符合组件规范；且应该遍历请求拿到的行数据生成表格行，而不是遍历列配置
• 错误捕获逻辑错误：catch中错误打印了Error构造函数，没有输出实际捕获的接口报错信息
• 缺少TableBody组件：MUI Table的内容行必须包裹在TableBody组件内
• 列表渲染没有加唯一key属性，会触发React警告

修正后完整代码 #

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

import Table from '@mui/material/Table';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import TableBody from '@mui/material/TableBody';
import Paper from '@mui/material/Paper';


export default function BasicTable() {
  const [data,setData] = useState([])
  // 列配置对应表头，后续修改更易维护
  const columns = [
    {field: 'symbol', label: 'Stock Name'},
    {field: 'currency_quote', label: 'Quote'},
  ]
  useEffect(()=>{
    axios.get(`https://api.twelvedata.com/cryptocurrencies`)
    .then(
      (res)=>{
        console.log(res.data)
        // 正确取接口返回的列表字段
        setData(res.data.data)
      }
    )
    .catch(
      (err)=>{
        // 打印实际报错信息
        console.log(err)
      }
    )
  },[])
  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
        <TableHead>
          <TableRow>
            {/* 遍历columns生成表头 */}
            {columns.map(col => (
              <TableCell key={col.field}>{col.label}</TableCell>
            ))}
          </TableRow>
        </TableHead>
        <TableBody>
          {/* 遍历行数据生成每一行表格 */}
          {data.map((row) => (
            <TableRow
              key={row.symbol}
              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
            >
              <TableCell component="th" scope="row">
                {row.symbol}
              </TableCell>
              <TableCell>{row.currency_quote}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

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