Question

使用api im可以将250个资产的列表分成多个页面。我试图调用要在蚂蚁设计表中列出的许多页面

  constructor(props) {
    super(props);
    this.state = {
        data: [],
        loading: true
    }
  }

  componentDidMount() {
    axios.all([
      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'),
      axios.get('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=250&page=2&sparkline=true&price_change_percentage=24hr')
    ])
    .then(axios.spread((res => {
      const data = res.data;
      this.setState({ data, loading: false })
  })))
}

  render() {

    const { data } = this.state;

    const tableData = data.map(row => ({
      Rank: row.market_cap_rank,
      Symbol: row.symbol,
      Name: row.name,
      Price: row.current_price,
      marketCap: row.market_cap,
      priceChange: row.price_change_percentage_24h,
      sparkline: row.sparkline_in_7d.price
    }))

    const columns = [{
      title: 'Rank',
      dataIndex: 'Rank',
      key: 'market_cap_rank',
    }, {
      title: 'Symbol',
      dataIndex: 'Symbol',
      key: 'symbol',
      render: (value) => {
        return <span>{value.toUpperCase()}</span>;
      },
    }, {
      title: 'Name',
      dataIndex: 'Name',
      key: 'name',
    }, {
      title: 'Price',
      dataIndex: 'Price',
      key: 'current_price',
      render: (value) => {
        return <span>$<b>{value.toFixed(2)}</b></span>;
      },
    }, {
      title: 'Market Cap',
      dataIndex: 'marketCap',
      key: 'market_cap',
      render: (value) => {
        return`$${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      },
...

    <Table 
      pagination="false"
      loading={this.state.loading} 
      dataSource={tableData} 
      columns={columns} 
      size="small"
    />

这有效，但只显示第一页，第二页也没有显示

很抱歉这个愚蠢的问题，也许有人可以花点时间为我提供帮助，因为这个问题可能源于缺乏普遍的了解。听到其他人在这里肯定很高兴！：）

Answer 1

您必须像下面那样更新componentDidMount

axios.all([
      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'),
      axios.get('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=250&page=2&sparkline=true&price_change_percentage=24hr')
    ])
    .then(resArr =>{
      const data = [];
      resArr.map(res=> data.push(...res.data));
      this.setState({ data, loading: false });
    });

Answer 2

这是因为传递给axios.spread的函数以两个不同的参数接收请求的结果。

例如axios doc

中的示例

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));

您的axios.spread将分别收到两个页面：

然后您可以将两个页面连接起来以获取数据

axios
  .all([
    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'),
    axios.get('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=250&page=2&sparkline=true&price_change_percentage=24hr')
    ])
  .then(axios.spread(((page1, page2) => {
    const data = [...page1.data, ...page2.data];
    this.setState({ data, loading: false })
  })))

如果您要拥有一定数量以上的页面，则可以使用rest运算符，并使用split和concat展平数组。

axios
  .all(arrayOfLinks)
  .then(axios.spread(((...pages) => { // use rest operator to get an array of pages containing your data
    const data = [].concat(...pages.data); // use spread operator in a concat to flatten your arrays of data
    this.setState({ data, loading: false })
  })))

两个axios请求，一个响应

2 个答案: