React 组件刷新后抛出 const undefined 错误

Question

我试图想出一个基本的仪表板，它会显示 SQL 使用 React 在卡片元素内计数的结果，但在非常沮丧的情况下，我能够使用此代码呈现组件。

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;

但是，每当我出于某种原因刷新页面时，浏览器都会抛出一个错误，提示变量 xxx 和 yyy 未定义。只有当我删除它们的引用时错误才会消失，如下所示：

来自 <p>{xxx[0].cantidad}</p> 至 <p></p>

然后，为了再次查看计数，我再次添加引用。

如何防止这种情况发生？

提前谢谢大家。

Answer 1

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>
    );

xxx?.[0]?.cantidad ?? '' 最初它会 return 一个空字符串，或者你可以写 xxx?.[0]?.cantidad ?? 'Loading...'。加载后，它将显示所需的数据。

React 组件刷新后抛出 const undefined 错误

React component throws a const undefined error after refreshing

javascript

reactjs

axios

dashboard