使用React.useEffect渲染Promise返回值时出现undefined问题求助

你的代码主要有三个问题导致后续出现undefined的情况：

1. 请求失败时会将pageInfo设为undefined #

getPageInfo的catch块没有返回任何值，当API请求失败时，then(data => setPageInfo(data))里的data就是undefined，会把pageInfo重置为undefined，此时渲染pageInfo.pageTitle就会报错。

2. useEffect依赖数组不合理 #

getPageInfo内部并没有使用传入的props，但你把props放在了useEffect的依赖数组里，这会导致props任意变化时都触发重新请求。如果某次请求失败，就会覆盖之前正常的pageInfo值。

3. 渲染时未做空值检查 #

初始pageInfo是undefined，请求过程中或者请求失败后，直接访问pageInfo.pageTitle会抛出错误，表现为页面出现undefined相关的异常。

修复后的代码示例 #

export default function Dashboard(props) {
    // 初始化为null，避免初始渲染的空值问题
    const [pageInfo, setPageInfo] = React.useState(null);
    // 新增错误状态，用于提示用户请求失败
    const [error, setError] = React.useState(null);

    // 使用useCallback包裹函数，避免每次渲染重新创建函数
    const getPageInfo = React.useCallback(async () => {
        try {
            setError(null); // 请求开始前清空错误状态
            const userId = localStorage.getItem('userId');
            if (!userId) {
                throw new Error('未获取到用户ID');
            }
            const userRes = await axios.get(`http://localhost:8000/user/${userId}`);
            const pages = userRes.data.pages;
            if (!pages || pages.length === 0) {
                throw new Error('用户没有关联页面');
            }
            const lastPageId = pages[pages.length - 1];
            const pageRes = await axios.get(`http://localhost:8000/page/${lastPageId}`);
            setPageInfo(pageRes.data);
        } catch (err) {
            console.error(err);
            setError(err.message);
            // 请求失败时不重置pageInfo，保留之前的有效数据
        }
    }, []); // 依赖数组为空，仅组件挂载时请求一次；若需监听userId变化，可添加[userId]

    React.useEffect(() => {
        getPageInfo();
    }, [getPageInfo]);

    // 渲染时做空值判断和错误处理
    return (
        <div>
            {error && <Typography color="error">{error}</Typography>}
            {pageInfo ? (
                <Typography>{pageInfo.pageTitle}</Typography>
            ) : (
                <Typography>加载中...</Typography>
            )}
        </div>
    );
}

关键修复点说明 #

• 空值处理：初始pageInfo设为null，渲染时通过三元判断或可选链操作符（pageInfo?.pageTitle）避免空值访问错误。
• 错误状态管理：新增error状态存储错误信息，请求失败时不覆盖原有的pageInfo，保留之前的有效数据。
• 优化useEffect依赖：用useCallback包裹getPageInfo，确保依赖数组正确，避免不必要的重复请求；如果需要监听userId变化，可将userId加入依赖数组。
• 参数校验：新增userId和pages的合法性校验，提前抛出明确的错误信息。

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