React：如何将两个不同API的数据作为props传入单个组件

嘿，这个需求其实很好实现，核心思路就是先把两个API的数据都拿到，提取你需要的部分组合成新对象，再传给目标组件。我给你一步步拆解：

第一步：并行获取两个API数据（提升性能） #

在getInitialProps里，用Promise.all同时发起两个请求，比串行请求效率更高。然后把两个接口的响应转换成JSON格式，再提取需要的字段组合：

static async getInitialProps() {
  try {
    // 并行发起两个API请求
    const [api1Res, api2Res] = await Promise.all([
      fetch('https://api-1.com'),
      fetch('https://api-2.com')
    ]);

    // 检查请求是否成功
    if (!api1Res.ok || !api2Res.ok) {
      throw new Error('某个API请求失败啦');
    }

    // 解析响应数据
    const api1Data = await api1Res.json();
    const api2Data = await api2Res.json();

    // 提取你需要的部分数据，组合成新对象
    const combinedData = {
      // 示例：取第一个API里的name和id字段
      api1Name: api1Data.name,
      api1Id: api1Data.id,
      // 示例：取第二个API里的price和description字段
      api2Price: api2Data.price,
      api2Desc: api2Data.description
    };

    // 返回所有需要的数据：组合后的给目标组件，原数据给其他组件
    return { combinedData, api1Data, api2Data };
  } catch (err) {
    // 处理请求错误，比如返回错误信息
    return { error: err.message };
  }
}

第二步：把组合数据传给目标组件 #

在render方法里，你可以像往常一样给其他组件传原API数据，同时把combinedData传给需要它的单个组件：

render() {
  const { combinedData, api1Data, api2Data, error } = this.props;

  // 如果有错误，先显示错误信息
  if (error) {
    return <div>请求出错：{error}</div>;
  }

  return (
    <div>
      {/* 原来的组件依然用各自的原数据 */}
      <FirstComponent data={api1Data} />
      <SecondComponent data={api2Data} />
      {/* 目标组件（比如你的slider.js）接收组合后的部分数据 */}
      <Slider data={combinedData} />
    </div>
  );
}

第三步：在目标组件里使用组合数据 #

最后，在你的Slider组件里，就可以直接从props里拿到两个API的部分值了：

// slider.js示例
const Slider = ({ data }) => {
  return (
    <div className="slider">
      <h3>{data.api1Name}</h3>
      <p>商品价格：{data.api2Price}</p>
      <p>商品描述：{data.api2Desc}</p>
    </div>
  );
};

export default Slider;

这样就完美实现了单个组件同时接收两个API的部分数据啦！如果后续需要调整要提取的字段，只需要修改combinedData里的内容就行，非常灵活。

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