javascript - 如何更好地格式化从 api 提取的数据到 Ant 设计表

Question

我正在尝试使用从 api 提取的数据向 ant design 表中的某些列添加美元符号前缀和逗号。

这就是我想要的，我似乎无法弄清楚这一点以及我一生中的其他一些事情:

  componentDidMount() {
    axios.get('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=24hr')
      .then(res => {
          const data = res.data;
          this.setState({ data })
      })
  }
  render() {
    const { data } = this.state;

    const tableData = data.map(row => ({
      Rank: row.market_cap_rank,
      Name: row.name,
      Price: row.current_price,
      Change: row.price_change_24h,
      totalVol: row.total_volume,
      marketCap: row.market_cap,
    }))

    const columns = [{
      title: 'Rank',
      dataIndex: 'Rank',
      key: 'Rank',
    }, {
      title: 'Name',
      dataIndex: 'Name',
      key: 'Name',
    }, {
      title: 'Price',
      dataIndex: 'Price',
      key: 'Price',
    }, {
      title: '24hr Change',
      dataIndex: 'Change',
      key: 'Change',
    }, {
      title: 'Total Volume',
      dataIndex: 'totalVol',
      key: 'totalVol',
    },

...

<Table rowKey='Name' columns={columns} dataSource={tableData} size="small"/>

我也很清楚我编写的代码可以更好，任何提示或建议(例如有关表的 key 或其他任何内容)，请告诉我!

Answer 1

根据 documentation Ant Design Table 的(检查列部分)，您必须在列中使用 render 来执行此操作。示例-

const columns = [
.....
{
  title: 'Price',
  dataIndex: 'Price',
  key: 'Price',
  render: (value, row, index) => {
    // do something like adding commas to the value or prefix
    return <span>$ {value.toLocaleString('en-US')}</span>;
  },
},
.....