如何更好地格式化从 api 提取到 ant 设计表的数据答案

【问题标题】：how to better format data pulled from api onto a ant design table如何更好地格式化从 api 提取到 ant 设计表的数据
【发布时间】：2019-11-09 18:36:08
【问题描述】：

我正在尝试将美元符号的前缀以及逗号添加到 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"/>

我也很清楚，我编写的代码可能会更好，任何提示或建议，例如关于表的密钥或其他任何内容，请告诉我！

【问题讨论】：

可以直接使用data与ant table，无需映射。 key 应该是 json 对象的实际键。与 Rank 一样，使用 market_cap_rank 作为键。 dataIndex 是值所在的位置，在本例中为 market_cap_rank。如果它有一个嵌套键 value 您想在表格中显示，dataIndex 将是 market_cap_rank.value，但键仍然是 market_cap_rank。

标签： javascript reactjs antd

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

是的，谢谢你提到这一点。