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

【问题标题】：React component throws a const undefined error after refreshingReact 组件刷新后抛出 const undefined 错误
【发布时间】：2022-01-04 18:44:39
【问题描述】：

我正在尝试制作一个基本仪表板，它可以使用 React 显示卡片元素内的 SQL 计数结果，但非常沮丧的是，我能够使用此代码呈现组件。

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>

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

如何防止这种情况发生？

提前谢谢大家。

【问题讨论】：

您正试图在数据完成提取之前获取数据。尝试添加微调器或等到收到数据后再渲染。

标签： javascript reactjs axios dashboard

【解决方案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 ?? '' 最初它会返回一个空字符串，或者你可以写成xxx?.[0]?.cantidad ?? 'Loading...'。一旦加载，它将显示所需的数据。

【讨论】：