如何更好地格式化从api提取到蚂蚁设计表上的数据

Question

我正尝试在ant设计表中的某些列上添加一个美元符号和逗号的前缀，并从api中提取数据。

这就是我要去的地方，我似乎无法弄清楚这件事以及我生命中的其他几件事：

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

我也很清楚，我编写的代码可能会更好，并且任何技巧或建议，例如关于表的键或其他任何东西，请让我知道！

Answer 1

根据Ant Design Table的documentation（请检查Column部分），您必须在列中使用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>;
  },
},
.....

Answer 2

这需要一些格式，我早就尝试过了，我使用的功能是：

value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')

这会将$和逗号添加到适当的位置。 谢谢