React组件刷新页面后抛出变量xxx、yyy未定义错误如何解决

报错的核心原因是首次渲染阶段异步接口尚未返回数据：你给cuentaClientes和cuentaVehiculos设置的初始值是空数组，首次渲染时还没执行到useEffect里的接口请求逻辑，两个state都是空数组，经map转换得到的xxx、yyy也为空数组，直接访问xxx[0].cantidad时，xxx[0]为undefined，访问undefined的属性自然会触发JS报错。

你可以任选以下一种方式修复：

方式1：可选链+默认值兜底（改动最小） #

直接在渲染取值处用可选链判断上层属性是否存在，搭配空值合并运算符给默认展示内容即可：

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

?.会先判断左侧的xxx[0]是否存在，不存在时直接返回undefined，不会继续访问后续属性，??会在左侧值为undefined/null时展示后面的默认内容。

方式2：新增全局加载状态判断 #

在所有接口返回前统一展示加载提示，避免渲染空数据：

1. 新增加载状态state：

const [loading, setLoading] = useState(true);

2. 用Promise.all等待两个接口全部返回后再更新状态：

useEffect(() => {
  Promise.all([
    axios.get("http://localhost:3002/api/clientes/contar"),
    axios.get("http://localhost:3002/api/vehiculos/contar")
  ]).then(([clientesRes, vehiculosRes]) => {
    setcuentaClientes(clientesRes.data);
    setcuentaVehiculos(vehiculosRes.data);
    setLoading(false);
  })
}, []);

3. 渲染前先判断加载状态：

if (loading) return <div style={{padding: 20}}>数据加载中...</div>
return (
  // 原有渲染逻辑不变
)

方式3：简化state结构（推荐） #

你这两个接口返回的都是单条计数结果，完全没必要用数组存储，直接把state初始值设为对象即可，还能省略多余的map操作：

// 把state初始值改为对象，提前定义好字段
const [cuentaClientes, setcuentaClientes] = useState({cantidad: 0});
const [cuentaVehiculos, setcuentaVehiculos] = useState({total: 0});

useEffect(() => {
  axios.get("http://localhost:3002/api/clientes/contar").then((res) => {
    // 接口返回数组的话直接取第一个元素赋值
    setcuentaClientes(res.data[0]);
  });
  axios.get("http://localhost:3002/api/vehiculos/contar").then((res) => {
    setcuentaVehiculos(res.data[0]);
  });
}, []);

// 不需要再定义yyy和xxx变量，渲染时直接从state取值
return (
  <div>
    <Row gutter={[16, 16]}>
        <Col span={8}>
            <Card title="Clientes" bordered={false}>
                <p>{cuentaClientes.cantidad}</p>
            </Card>
        </Col>
        <Col span={8}>
            <Card title="Vehiculos" bordered={false}>
                <p>{cuentaVehiculos.total}</p>
            </Card>
        </Col>
    </Row>
  </div>
);

这种方式逻辑更简洁，也从根源避免了空数组取值的问题。

内容的提问来源于stack exchange，提问作者Edgar O.