Javascript React/JS/TS-表赢得'；不渲染行

我试图简化这一页，因此我有了一个新的组件

Table.tsx

，它完成了它似乎要做的事情，呈现表格的标题和行！但是，在这种情况下，行没有呈现，这让我很困惑。是我在不久前调用return来定义

coins

还是

sparkline

import React, { useEffect, useCallback } from 'react';
import axios from 'axios'

import numabbr from 'numabbr';
import truncFixed from '../../../utils/truncFixed';

import DynamicTable from '@atlaskit/dynamic-table';
import Button, { ButtonGroup } from '@atlaskit/button';

import { Sparklines, SparklinesCurve } from 'react-sparklines';

import StarIcon from '@atlaskit/icon/glyph/star';
import EditorPanelIcon from '@atlaskit/icon/glyph/editor/panel';


export default function Table() {
  let [coinData, setCoinData] = React.useState<any>('');

  const fetchCoinData = useCallback(() => {
    axios({
      "method": "GET",
      "url": "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=250&page=1&sparkline=true&price_change_percentage=1h%2C24h%2C7d%2C14d%2C30d%2C1y",
    })
    .then((res) => {
      setCoinData(res.data)
      console.log(res.data)
    })
    .catch((error) => {
      console.log(error)
    })
  }, [])

  useEffect(() => {
    fetchCoinData()
  }, [fetchCoinData])

  const createHead = (withWidth: boolean) => {
    return {
      cells: [
        {
          key: 'fav',
          content: 'Rank',
          width: 2,
        },
        {
          key: 'symbol',
          width: 5,
        },
        {
          key: 'name',
          content: 'Name',
          isSortable: true,
          width: 18,
        },
        {
          key: 'price',
          content: 'Price',
          isSortable: true,
        },
      ],
    };
  };

  const head = createHead(true);

  if ((typeof coinData.data !== "undefined") 
           && coinData.data !== null) {

    var coins = coinData.data;

    for(let i = 0, l = coins.length; i < l; i++) {
      var rows = coins.map((coin: any) => {
        let coinss = coin.sparkline_in_7d.price
        // return every 4 results in the sparkline
        // to make it less exact and more cute
        console.log(coinss)

        let sparklineee = coinss.filter((element: any, index: number) => {
          return index % 4 === 0;
        })
        return {
          cells: [                
            {
              key: 'fav',
              content: (
                <p>{coin.market_cap_rank}</p>
              ),
            },
            {
              key: 'symbol',
              content: (
                <span style={{ display: 'flex', alignItems: 'center' }}>
                  <p><b>{coin.symbol.toUpperCase()}</b></p>
                </span>
              ),
            },
            {
              key: 'name',
              content: (
                <span style={{ display: 'flex', alignItems: 'center' }}>
                  <p style={{ fontSize: 12}}>{coin.name}</p>
                </span>
              ),
            },
            {
              key: 'price',
              content: (
                <p>$<b>{truncFixed(Number(coin.current_price), 2)}</b></p>
              ),
            },
          ],
        };
      })
    }
  };   
  return (
    <DynamicTable
        head={head}
        rows={rows}
        rowsPerPage={100}
        defaultPage={1}
        defaultSortKey="mcap"
        defaultSortOrder="DESC"
        loadingSpinnerSize="large"
    />  
  );
}

import React，{useffect，useCallback}来自“React”；
从“axios”导入axios
从“numabbr”进口numabbr；
从“../../../utils/truncFixed”导入truncFixed；
从“@atlaskit/dynamic table”导入DynamicTable；
从“@atlaskit/Button”导入按钮，{ButtonGroup}；
从“react Sparklines”导入{Sparklines，SparklinesCurve}；
从“@atlaskit/icon/glyph/star”导入StarIcon；
从“@atlaskit/icon/glyph/editor/panel”导入EditorPanelIcon；
导出默认函数表（）{
let[coinData，setCoinData]=React.useState（“”）；
const fetchCoinData=useCallback（（）=>{
axios({
“方法”：“获取”，
“url”：”https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=250&page=1&sparkline=true&price_change_percentage=1h%2C24h%2C7d%2C14d%2C30d%2C1y",
})
。然后（（res）=>{
setCoinData（res.data）
console.log（res.data）
})
.catch（（错误）=>{
console.log（错误）
})
}, [])
useffect（（）=>{
fetchCoinData（）
}，[fetchCoinData]）
const createHead=（宽度：布尔）=>{
返回{
单元格：[
{
键：“fav”，
内容：“排名”，
宽度：2，
},
{
键：'符号'，
宽度：5，
},
{
关键字：“名称”，
内容：“名称”，
是的，
宽度：18，
},
{
关键词：“价格”，
内容:"价格",，
是的，
},
],
};
};
const head=createHead（真）；
if（（typeof coinData.data！=“未定义”）
&&coinData.data！==null）{
var coins=coinData.data；
for（设i=0，l=coins.length；i{
让coins=coin.sparkline\u in_7d.price
//每4个结果返回一次
//让它更不精确，更可爱
console.log（coins）
让sparklineee=coins.filter（（元素：any，索引：number）=>{
返回索引%4==0；
})
返回{
单元格：[
{
键：“fav”，
内容：(
{硬币市场_cap_rank}

),
},
{
键：'符号'，
内容：(
{coin.symbol.toUpperCase（）}

),
},
{
关键字：“名称”，
内容：(
{coin.name}
),
},
{
关键词：“价格”，
内容：(
${truncFixed（数字（硬币当前价格），2）}

),
},
],
};
})
}
};   
返回(
);
}

编辑：我是说

console.log（coins）

甚至不会被调用。相当混乱，让我同时尝试重写它。

尝试使用状态

let[rows，setRows]=useState（null）

一旦您的行数据准备就绪。调用
setRows（rows）
，以便您的组件
知道如何更新。当前，行数据是在呈现组件后设置的

使用以下逻辑。（我已经删除了util函数，因为我没有它。您可以添加它并运行它。）


import React，{useffect}来自“React”；
从“axios”导入axios；
从“@atlaskit/dynamic table”导入DynamicTable；
导出默认函数表（）{
let[rows，setRows]=React.useState（{}）；
let[loading，setLoading]=React.useState（true）；
让fetchCoinData=（）=>{
axios({
方法：“获取”，
网址：
"https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=250&page=1&sparkline=true&price_change_percentage=1h%2C24h%2C7d%2C14d%2C30d%2C1y"
})
。然后（res=>{
if（res.data的类型！==“未定义”&&res.data！==null）{
//切片数据-快速
让硬币=分辨率数据切片（0,10）；
//完整数据-慢速
//让硬币=实物数据；
for（设i=0，l=coins.length；i{
让coinss=coin.sparkline\u in_7d.price；
让sparklineee=coins.filter（（元素：any，索引：number）=>{
返回索引%4==0；
});
返回{
单元格：[
{
钥匙：“fav”，
内容：{coin.market\u cap\u rank}

},
{
键：“符号”，
内容：(

{coin.symbol.toUpperCase（）}

)
},
{
键：“名称”，
内容：(
{coin.name}
)