React中async/await调用先返回undefined后出正确值 组件无法渲染数据

• React组件初始渲染会优先使用useState设置的初始值，你的easybaseData初始值是空数组，此时easybaseData[0]为undefined，通过可选链获取的image、name、price字段自然都是undefined，这是第一次渲染的正常表现。
• useEffect内的异步接口请求是在组件挂载完成后才执行的，请求完成调用setEasybaseData更新状态后才会触发第二次渲染，此时才能拿到接口返回的正常数据。
• 你的代码中console.log('easybaseData')仅打印了固定字符串，没有输出接口返回的真实数据，无法确认接口返回结构是否符合预期，也有可能是接口返回的数组结构和你预期不一致，比如数据嵌套在返回对象的某个子字段中、字段名拼写/大小写不匹配。

1. 增加加载状态判断，数据未返回时显示占位内容，避免渲染无效的undefined值，参考修改后代码：

import { Grid } from '@material-ui/core';
import React, { useEffect, useState } from 'react';
import { useEasybase } from 'easybase-react';

export default function Data() {
    const [easybaseData, setEasybaseData] = useState([]);
    // 新增加载状态标记
    const [loading, setLoading] = useState(true);
    const { db } = useEasybase();

    const mounted = async() => {
        try {
            const ebData = await db("cars").return().limit(1).all();
            // 打印返回值确认结构是否符合预期
            console.log('接口返回数据：', ebData);
            setEasybaseData(ebData);
        } catch (err) {
            console.error('接口请求失败：', err);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        mounted();
    }, []);    

    // 加载中返回占位内容
    if (loading) return <div>加载中...</div>;
    // 无数据兜底
    if (!easybaseData.length) return <div>暂无匹配数据</div>;

    const ez = easybaseData[0]; 
    const i = ez.image;
    const n = ez.name;
    const p = ez.price;

    return (
        <Grid item xs={6} id={"outputs-grid"}>
            <div className="image-result-wrapper">
                <img
                    src={`http://localhost:3000/assets/images/${i}`}
                    className="image-result"
                    alt={n}
                />
                </div>
                <div className="details-result-wrapper">
                <p className="details-result">{n}</p>
                </div>
                <div className="price-result-wrapper">
                <p className="price-result">{`Evaluation: $${p}`}</p>
            </div>
        </Grid>
    )
}

2. 确认接口返回结构：如果打印的ebData不是直接包含数据的数组，需要根据实际返回结构调整取值逻辑，比如如果返回的是{ data: [...] }格式，就需要把setEasybaseData(ebData)改为setEasybaseData(ebData.data)。同时检查返回的字段名是否和你取值的image、name、price完全一致，注意大小写、拼写错误。

内容的提问来源于stack exchange，提问作者DanielSon