React / JS / TS-表不会渲染行

如何解决React / JS / TS-表不会渲染行

我正在尝试简化这一页，所以我有一个新的组件Table.tsx，它似乎可以完成工作，呈现表格的头和行！但是，在这种情况下，行没有显示，这让我很困惑。难道我要在定义coinss或sparkline之前返回return行吗？

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',],};
  };

  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',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"
    />  
  );
}

编辑：我的意思是。console.log(coinss)甚至没有被呼叫。相当困惑，让我同时尝试重写此内容。

解决方法

尝试使用状态。

let [rows,setRows] = useState(null);

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

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

import React,{ useEffect } from "react";
import axios from "axios";

import DynamicTable from "@atlaskit/dynamic-table";

export default function Table() {

let [rows,setRows] = React.useState<any>({});
let [loading,setLoading] = React.useState<boolean>(true);

let fetchCoinData = () => {
    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 => {
            if (typeof res.data !== "undefined" && res.data !== null) {
                // Sliced Data - Fast
                let coins = res.data.slice(0,10);

                // Full Data - Slow
                // let coins = res.data;
                for (let i = 0,l = coins.length; i < l; i++) {
                    var rowsData = coins.map((coin: any) => {
                        let coinss = coin.sparkline_in_7d.price;

                        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",alignItems: "center" }}>
                                            <p style={{ fontSize: 12 }}>{coin.name}</p>
                                        </span>
                                    )
                                },{
                                    key: "price",content: (
                                        <p>
                                            $<b>{coin.current_price}</b>
                                        </p>
                                    )
                                }
                            ]
                        };
                    });
                    setRows(rowsData);
                    setLoading(false);
                }
            }
        })
        .catch(error => {
            console.log(error);
        });
};

useEffect(() => {
    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);

return (
    <DynamicTable
        head={head}
        rows={rows}
        rowsPerPage={20}
        defaultPage={1}
        isLoading={loading}
        defaultSortKey="price"
        defaultSortOrder="DESC"
        loadingSpinnerSize="large"
    />
);
}