Estoy tratando de crear un tablero básico que muestre los resultados de los recuentos de SQL dentro de los elementos de la tarjeta usando React y, con mucha frustración, pude renderizar el componente usando este código.

 import axios from "axios"; import React, { useEffect, useState } from "react"; import { Card, Col, Row } from 'antd'; import "../App.css"; function Dashboard() { const [cuentaClientes, setcuentaClientes] = useState([]); const [cuentaVehiculos, setcuentaVehiculos] = useState([]); useEffect(() => { axios.get("http://localhost:3002/api/clientes/contar").then((data) => { setcuentaClientes(data.data); }); axios.get("http://localhost:3002/api/vehiculos/contar").then((data) => { setcuentaVehiculos(data.data); }); }, []); const yyy = cuentaVehiculos.map((vehiculo) => { return { key: vehiculo.total, total: vehiculo.total, }; }); const xxx = cuentaClientes.map((cliente) => { return { key: cliente.cantidad, cantidad: cliente.cantidad, }; }); return ( <div> <Row gutter={[16, 16]}> <Col span={8}> <Card title="Clientes" bordered={false}> <p>{xxx[0].cantidad}</p> </Card> </Col> <Col span={8}> <Card title="Vehiculos" bordered={false}> <p>{yyy[0].total}</p> </Card> </Col> </Row> </div> ); } export default Dashboard;

Sin embargo, cada vez que actualizo la página por cualquier motivo, el navegador arroja un error que dice que las variables xxx e yyy no están definidas. El error solo desaparece cuando elimino sus referencias, así:

de <p>{xxx[0].cantidad}</p> a <p></p>

Luego, para volver a ver el conteo, solo agrego las referencias nuevamente.

¿Cómo puedo evitar que esto suceda?

Gracias a todos de antemano.