useEffect无法获取数据：随机名言生成器初始化无输出问题求助

原代码的核心问题是异步操作的时序错误：

• fetchData 是异步函数，调用后不会立刻完成数据请求，此时 quotes 还是初始的空数组。
• 直接在 useEffect 里调用 generateRandomQuote，会因为 quotes.length 为0，导致生成的随机索引无效，无法设置有效的随机名言。
• 另外，setQuotes 是异步更新状态的操作，调用后不能立刻拿到最新的 quotes 值。

修正后的代码方案 #

方案一：在数据请求完成后立即生成随机名言 #

const [quotes, setQuotes] = useState([]);
const [randomQuote, setRandomQuote] = useState();

useEffect(() => {
    async function fetchData() {
        try {
            const res = await fetch(process.env.NEXT_PUBLIC_API_URL);
            const data = await res.json();
            setQuotes(data);
            // 数据获取完成后直接生成随机名言
            generateRandomQuote(data);
        } catch (err) {
            console.error(err);
        }
    }

    fetchData();
}, []);

// 修改generateRandomQuote，支持传入外部数据（避免依赖组件状态的异步延迟）
const generateRandomQuote = (quoteData = quotes) => {
    if (quoteData.length === 0) return;
    const randomIndex = Math.floor(Math.random() * quoteData.length);
    const selectedQuote = quoteData[randomIndex];
    setRandomQuote(selectedQuote);
};

方案二：监听quotes状态变化，数据就绪时自动生成 #

const [quotes, setQuotes] = useState([]);
const [randomQuote, setRandomQuote] = useState();

useEffect(() => {
    async function fetchData() {
        try {
            const res = await fetch(process.env.NEXT_PUBLIC_API_URL);
            const data = await res.json();
            setQuotes(data);
        } catch (err) {
            console.error(err);
        }
    }

    fetchData();
}, []);

// 当quotes有数据时，自动生成随机名言
useEffect(() => {
    if (quotes.length > 0) {
        generateRandomQuote();
    }
}, [quotes]);

const generateRandomQuote = () => {
    const randomIndex = Math.floor(Math.random() * quotes.length);
    const selectedQuote = quotes[randomIndex];
    setRandomQuote(selectedQuote);
};

关键修改点 #

• 方案一：在数据请求成功后，直接用获取到的data调用生成函数，绕开状态更新的异步延迟。
• 方案二：新增一个监听quotes的useEffect，当quotes从空数组变为有数据时，自动触发随机名言生成。
• 增加了空数组判断，避免索引越界错误。

内容的提问来源于stack exchange，提问作者Ali Bin Naseer