React中如何将前一个API调用结果作为参数发起第二个API调用？

你踩的这个坑是React新手常遇到的异步操作顺序问题——第一个API调用是异步的，当你在componentDidMount里直接写第二个请求时，第一个请求还没返回数据，this.state.coinList还是初始的空数组，所以第二个请求自然会失败。另外你提到的“看到两个空数组”，其实是React状态更新的特性：组件初始化时用的是初始状态（空数组），第一个请求完成后才会更新状态，中间的两次渲染会让你看到初始值。

除了异步顺序的问题，还有个隐藏的小错误：第一个请求返回的coins.Data是对象（不是数组），里面的键是各个加密货币的代码，你直接把this.state.coinList拼到URL里会得到无效参数，这也是第二个请求失败的原因之一。

怎么解决？ #

核心思路就是等第一个请求完全成功、状态更新完成后，再发起第二个请求。具体做法是把第二个API调用放到第一个请求的.then()回调里面，还要处理参数格式的问题：

修改后的完整代码如下：

import React, { Component } from 'react'; 
import axios from 'axios'; 

class App extends Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
      coinList: {}, // 改成空对象，匹配API返回格式
      coinInfos: {} 
    }; 
  } 

  componentDidMount() { 
    // 第一步：获取所有加密货币列表
    axios.get('https://min-api.cryptocompare.com/data/all/coinlist')
      .then(res => {
        const coins = res.data;
        console.log(coins);
        // 用setState的回调确保状态更新完成后再执行下一步
        this.setState({ coinList: coins.Data }, () => {
          // 提取所有货币代码，拼接成API需要的逗号分隔格式
          const coinSymbols = Object.keys(this.state.coinList).join(',');
          // 第二步：获取这些货币的价格数据
          axios.get(`https://min-api.cryptocompare.com/data/pricemultifull?fsyms=${coinSymbols}&tsyms=USD`)
            .then(response => {
              const coinCap = response.data;
              this.setState({ coinInfos: coinCap.RAW });
            })
            .catch(err => {
              console.error('获取价格数据失败:', err);
            });
        });
      })
      .catch(err => {
        console.error('获取货币列表失败:', err);
      });
  } 

  render() { 
    return( 
      <div className="App"> 
        {Object.keys(this.state.coinInfos).map((key) => ( 
          <div className="container" key={key}> {/* 必须加key，避免React警告 */}
            <span className="left">{key}</span> 
            <span className="right">{this.state.coinInfos[key].USD.MKTCAP}</span> 
          </div> 
        ))} 
      </div> 
    ); 
  } 
} 

export default App;

关键修改点解析 #

• 异步顺序控制：把第二个请求嵌套在第一个请求的.then()里，并且用setState的回调函数（第二个参数）——因为setState本身也是异步的，回调函数能保证我们拿到的是更新后的coinList。
• 参数格式修正：用Object.keys(this.state.coinList).join(',')把对象的键（货币代码）转换成逗号分隔的字符串，符合第二个API的参数要求。
• 状态类型匹配：把初始的coinList改成空对象，和API返回的数据结构一致。
• 错误处理：添加.catch()捕获请求失败的情况，方便调试排错。
• 列表渲染规范：给map生成的元素添加key属性，这是React列表渲染的强制要求。

这样调整后，两个API调用就会按正确的顺序执行，第二个请求能拿到有效的参数，就能成功获取数据并渲染啦！

内容的提问来源于stack exchange，提问作者Hara