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

Posted 2023-03-22

【中文标题】React 组件刷新后抛出 const undefined 错误

【英文标题】：React component throws a const undefined error after refreshing

【发布时间】：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>

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

如何防止这种情况发生？

提前谢谢大家。

【问题讨论】：

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

【参考方案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...'。一旦加载，它将显示所需的数据。