如何从多个 API 返回数据以显示在 React 的一个页面上？答案

【问题标题】：How do I return data from multiple APIs to display on one page in React?如何从多个 API 返回数据以显示在 React 的一个页面上？
【发布时间】：2021-01-28 22:34:15
【问题描述】：

我有两个要从中检索数据的 API 端点，我想显示每个端点中的记录数。到目前为止，这是我的代码，哪种有效，并且在 Postman 中测试 API 会返回正确的数据 -

const [orders, setOrders] = useState([]);
useEffect(() => {
  const fetchData = async () => {
    const resSeven = await axios('http://localhost:5000/api/7daycheck');
    const resThirty = await axios('http://localhost:5000/api/30daycheck');
    setOrders({ seven: resSeven.data, thirty: resThirty.data });
    };
    fetchData();
}, []);

现在，当我添加 console.log(orders.seven); 时，控制台会显示这个 -

因此，当我在 JSX 代码中添加行 {orders.seven.length} 时，它会引发错误“TypeError：无法读取未定义的属性‘长度’”。怎么回事？

【问题讨论】：

首先，将订单初始化为数组（const [orders, setOrders] = useState([]);），然后将其设置为对象（setOrders({ seven: resSeven.data, thirty: resThirty.data });）；这没有多大意义。无论如何，问题是由于 orders.seven 是 undefined 直到您从 fetch 调用中得到响应。如果您将 {orders.seven.length} 更改为 {orders && orders.seven && orders.seven.length}，您应该不会再看到该错误。

标签： javascript node.js reactjs api axios

【解决方案1】：

orders的初始状态是一个空数组：

const [orders, setOrders] = useState([]);

没有名为seven 的属性。因此，当您尝试显示该状态时：

<p>{orders.seven.length}</p>

你会得到一个错误。如果 orders 的结果值不是一个数组，那么你不应该将它设置为一开始。给它你期望的结构：

const [orders, setOrders] = useState({ seven: [] });

这会将其初始化为一个具有名为seven 的属性的对象，该属性本身是一个空数组。那么length 将正确地为0。

【讨论】：