如何在 ReactJS 中将数据从 API 渲染到表（函数组件）答案

【问题标题】：How to Render Data from API to Table in ReactJS (Function Component)如何在 ReactJS 中将数据从 API 渲染到表（函数组件）
【发布时间】：2021-12-23 18:44:20
【问题描述】：

我正在学习 ReactJS 中的表格，但无法在列中呈现获取的数据。实际上，API 已被获取（在控制台中），但并未将其对象呈现为 Material UI 表中的列。

使用的 API = api.twelvedata.com/cryptocurrencies, 方法 = 获取，axios

我想以以下表格格式将 API 中的所有符号和货币报价呈现到表格中：

请帮忙，如果可能，请解释错误。

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 Paper from '@mui/material/Paper';


export default function BasicTable() {
  const [data,setData] = useState([])
  const columns = [
    {field: 'symbol'},
    {field: 'currency_quote'},
  ]
  useEffect(()=>{
    axios.get(`https://api.twelvedata.com/cryptocurrencies`)
    .then(
      (a)=>{
        console.log(a.data)
        setData(a.data.symbol)
      }
    )
    .catch(
      (b)=>{
        console.log(Error)
      }
    )
  },[])
  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Stock Name</TableCell>
            <TableCell>Quote</TableCell>
          </TableRow>
        </TableHead>
        {data && columns.map(data=><div>{data.field}</div>)}
      </Table>
    </TableContainer>
  );
}

【问题讨论】：

您肯定是要映射data 状态而不是列，对吧？我认为应该是{data && data.map(data=><div>{data.field}</div>)}。
@DrewReese - 非常感谢您的帮助，我的意思是从 API 中提取所有符号并在列中呈现，代码是否可以正常工作？
我不太确定我是否跟随。您能否更新您的问题，详细说明您希望从获取的数据中获得什么以及预期的输出是什么？
@DrewReese - 编辑了问题。希望这会有意义：D

标签： reactjs api rest react-hooks use-effect

【解决方案1】：

嗯，看起来您正在保存未定义的数据。响应数据是一个具有data 属性的对象，该属性是一个数组。 IE。 response.data.data 或 a.data.data 在您的情况下。

// 20211111011738
// https://api.twelvedata.com/cryptocurrencies

{
  "data": [
    {
      "symbol": "0xBTC/BTC",
      "available_exchanges": [
        "Hotbit",
        "Mercatox"
      ],
      "currency_base": "0xBitcoin",
      "currency_quote": "Bitcoin"
    },
    {
      "symbol": "0xBTC/ETH",
      "available_exchanges": [
        "Hotbit",
        "Mercatox"
      ],
      "currency_base": "0xBitcoin",
      "currency_quote": "Ethereum"
    },
    ...

所以a.data.symbol 在尝试更新状态时未定义。

setData(a.data.symbol) // <-- undefined!

要解决您只想将响应 data 数组属性保存到状态。我建议还为 GET 请求的响应值使用比 a 更有意义的标识符。

useEffect(() => {
  axios.get(`https://api.twelvedata.com/cryptocurrencies`)
    .then(response => {
      setData(response.data.data)
    })
    .catch(console.error);
}, []);

下一个问题是映射。您有 2 列，符号和货币报价，因此这些是您要映射到表格主体的表格行（不是 div）的属性。

<TableContainer component={Paper}>
  <Table sx={{ minWidth: 650 }} aria-label="simple table">
    <TableHead>
      <TableRow>
        <TableCell>Stock Name</TableCell>
        <TableCell>Quote</TableCell>
      </TableRow>
    </TableHead>
    <TableBody> // <-- table body
      {data.map(({ currency_quote, symbol }, index) => (
        <TableRow key={index}> // <-- table row with React key(!!)
          <TableCell>{symbol}</TableCell>
          <TableCell>{currency_quote}</TableCell>
        </TableRow>
      ))}
    </TableBody>
  </Table>
</TableContainer>

【讨论】：