React钩子中调用函数出现Promise pending问题求助

你的推测完全正确——console.log(selectedVideo[0])返回undefined就是因为API请求还没完成，组件就已经尝试访问数据了。你的代码里有几个关键问题导致了这个现象：

1. useState初始化错误 #

你直接把fetchData（一个Promise对象）传给了useState作为初始值，所以组件初始状态里的selectedVideo就是一个pending状态的Promise，根本不是API返回的数据数组。

2. fetchData的定义方式错误 #

你把axios.get().then(...)直接赋值给fetchData，这时候fetchData本身就是一个Promise，不是可调用的函数。后续在useEffect里调用fetchData()其实是在调用Promise的then方法，逻辑完全不对。

3. 未处理异步数据的加载状态 #

组件渲染时会立刻执行console.log(selectedVideo)，这时候API请求大概率还没完成，状态还没更新，自然拿不到有效数据。

修正后的代码示例 #

import { useState, useEffect } from 'react';
import axios from 'axios';

// 假设baseURL和apiKEY已经定义
const YourComponent = () => {
    // 初始状态设为空数组，符合数据类型
    const [selectedVideo, setSelectedVideo] = useState([]);
    const url = `${baseURL}videos?api_key=${apiKEY}`;

    // 把fetchData定义成可调用的异步函数
    const fetchData = async () => {
        try {
            const resp = await axios.get(url);
            setSelectedVideo(resp.data);
        } catch (error) {
            // 别忘了处理请求失败的情况
            console.error('请求视频数据失败:', error);
        }
    };

    useEffect(() => {
        fetchData();
    }, []); // 空依赖确保组件挂载时只请求一次

    // 访问数据前先判断是否存在，避免undefined报错
    if (selectedVideo.length === 0) {
        return <div>加载中...</div>;
    }

    console.log(selectedVideo[0]); // 现在能拿到有效数据了
    return <div>视频数据已加载</div>;
};

export default YourComponent;

关键修正点说明 #

• 用空数组[]作为useState的初始值，和API返回的数组类型一致。
• 将fetchData改为异步函数，用async/await处理Promise，代码更清晰。
• 在useEffect中调用fetchData，确保组件挂载时才发起请求。
• 增加加载状态判断，避免在数据未返回时访问selectedVideo[0]导致报错。

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