javascript - How do I return data from multiple APIs to display on one page in React?

Question

I have two API endpoints that I am retrieving data from and I want to display the number of records in each. This is my code so far, which sort of works, and test6tg5ing the API in Postman returns the correct data -

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();
}, []);

question from:https://stackoverflow.com/questions/65939152/how-do-i-return-data-from-multiple-apis-to-display-on-one-page-in-react

Answer 1

The initial state of orders is an empty array:

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

Which has no property called seven. So when you try to display that state:

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

You'll get an error. If the resulting value for orders isn't an array then you shouldn't set it to one to begin with. Give it the structure you expect:

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

This would initialize it to an object with a property called seven which itself is an empty array. Then the length will correctly be 0.