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

Question

我有两个端点。我想一次从它们中获取数据并显示在一个元素中，例如，如果产品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

EDIT
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>

Answer 1

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

然后，您可以使用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端点来返回这些组合数据。这样，您就可以依靠数据模型中定义的现有关系来提取每个产品的库存数据。