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

Posted 2023-02-22

【中文标题】如何在 ReactJS 中将数据从 API 渲染到表（函数组件）

【英文标题】：How to Render Data from API to Table in ReactJS (Function Component)

【发布时间】：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

【参考方案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>