如何在 ReactJS 中渲染 API 到 Table 的数据（函数组件）

Question

我正在学习 ReactJS 中的 Tables，但无法在列中呈现获取的数据。实际上，API 被获取（在控制台中）但没有将其对象呈现为 Material UI Table.

中的列

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

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

求助，如果可能请解释错误。

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>
  );
}

Answer 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 列，符号和货币报价，因此这些是您要映射到 table 正文的 table 行（ 而不是 divs）的属性。

<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>

如何在 ReactJS 中渲染 API 到 Table 的数据（函数组件）

How to Render Data from API to Table in ReactJS (Function Component)

api

rest

reactjs

react-hooks

use-effect