如何在 React 中从多个端点获取和显示数据？答案

【问题标题】：How to fetch and display data from multiple endpoints in React?如何在 React 中从多个端点获取和显示数据？
【发布时间】：2021-09-02 14:25:29
【问题描述】：

我有两个端点。我想一次从它们那里获取数据并显示在一个元素中，例如，如果产品 ID 相同，则显示来自一个表的数据和来自另一个表的名称。这就是我现在为一个端点执行此操作的方式：

import React, {useState,useEffect} from 'react'
import products from '../apis/apiURLS'
import './Products.css';

const Products = () => {
    const [productInfo,setProductInfo] = useState([]);

    const fetchProducts  = async () =>{
        const response = await products.get('/products/')
        setProductInfo(response.data)
    }

    useEffect(()=>{
        fetchProducts()
    },[])

    return (
      <div>
      <h1 className = "header">Products</h1>      
      {productInfo.map(products=> {
        return (
          

      <div className="productInfo">
        {console.log(products)}
        <p>Date: {products.date}</p>

      </div>
          
      )

        
})}
</div>
    )}

export default Products

编辑
Products 端点具有这些字段：date, product_id，Stock 端点具有字段：product_id, name，product_id 是 Stock 的外键。
我试图为第二个端点添加另一个异步函数：

const [stockInfo, setStockInfo] = useState([]);
const fetchStock  = async () =>{
      const response = await stock.get('/stock/')
      setStockInfo(response.data)
  }
    useEffect(()=>{
      fetchStock()
  },[])

但我无法正确映射它以显示在一个元素中。我想要实现的是：

<p>Product: {stock.name}, {products.date}</p>

【问题讨论】：

你能展示你的尝试和预期的结果吗？您只显示您当前正在工作的内容，我们不知道您期望映射的结果是什么。这些如何相互依赖？
@zero298 我添加了一些细节，希望现在清楚
您的实体中有某种身份吗？所以你可以找到与产品相关的库存吗？像这样：const stock = stocks.find(s => s.id === product.id)。你可以把这个放在你.map()。
为什么不在一个请求中获取所有数据？
谢谢@Eggy，但我认为find() 只返回符合声明的第一条记录，我需要所有这些记录

标签： javascript reactjs django-rest-framework

【解决方案1】：

如果您认为向两个 API 请求的结果是相互依赖的，您可以使用 Promise.all 确保两个端点的 fetch 成功完成。

之后，您可以使用product_id 字段和单个useState 挂钩来合并结果，将合并后的数据设置为组件状态。

例如，

const combineUsingProductIdField = (products, stocks) => {
  const keyByProductIdField = (previousValue, currentValue) => ({
    ...previousValue,
    [currentValue.product_id]: currentValue,
  });
  const stocksByProductId = stocks.reduce(keyByProductIdField, {});

  const productsWithStock = products.map(product => ({
    product,
    stock: stocksByProductId[item.product_id],
  }));
  return productsWithStock;
};

const Products = () => {
  const [productsWithStock, setProductsWithStock] = useState([]);

  const fetchProductsWithStock = () => {
    const fetchProducts = async () => {
      return await products.get('/products/');
    };
    const fetchStocks = async () => {
      return await stock.get('/stock/');
    };

    try {
      const [_products, _stocks] = await Promise.all([
        fetchProducts,
        fetchStocks,
      ]);
      setProductsWithStock(combineUsingProductIdField(products, stocks));
    } catch (err) {
      // log to error reporting;
    }
  };

  useEffect(() => {
    fetchProductsWithStock();
  }, []);

  return (
    <div>
      <h1 className="header">Products</h1>
      {productsWithStock.map(({ product, stock }) => {
        return (
          <div className="productInfo">
            <p>
              Product: {stock.name}, {product.date}
            </p>
          </div>
        );
      })}
    </div>
  );
};

export default Products;

如果可以，我建议使用单个 API 端点来返回此组合数据。这样，您将依赖数据模型中定义的现有关系来提取每种产品的库存数据。

【讨论】：