使用React Hooks(useState/useEffect)获取API随机名言的问题求助

核心问题拆解 #

1. API返回结构无index字段：你调用的API返回的是仅包含quotes数组的对象，没有index属性，所以then里打印quote.index必然是undefined。
2. 渲染时未正确引用state中的index：JSX里的index未定义，应该使用quote.index（建议改名避免变量冲突）。
3. 闭包导致的state读取问题：getRandomIndex中直接使用quote.quotes.length会读取到旧的state值，应该依赖更新函数里的previosState获取最新数据。
4. 初始空数组访问报错：组件首次渲染时quotes是空数组，直接访问下标会抛出错误，需要增加空值判断。

修复后的完整代码 #

import React, { useState, useEffect } from "react";
const API =
 "https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json";

const App = () => {
  // 拆分state结构，避免与API返回的对象混淆
  const [quotes, setQuotes] = useState([]);
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    fetch(API)
      .then((res) => res.json())
      .then((data) => {
        setQuotes(data.quotes);
        // 初始化随机索引
        setCurrentIndex(Math.floor(Math.random() * data.quotes.length));
      });
  }, []);

  const getRandomIndex = () => {
    setCurrentIndex(Math.floor(Math.random() * quotes.length));
  };

  // 空数组时显示加载提示
  if (quotes.length === 0) {
    return <p>Loading quotes...</p>;
  }

  return (
    <>
      <p>this is quote: "{quotes[currentIndex].quote}"</p>
      <p>— {quotes[currentIndex].author}</p>
      <button onClick={getRandomIndex}>Get Random Quote</button>
    </>
  );
};

export default App;

关键修改说明 #

• 拆分state：把quotes数组和currentIndex拆分成独立的state，逻辑更清晰，避免与API返回的对象混淆。
• 初始随机索引：在获取到API数据后直接设置随机索引，确保首次渲染就显示随机名言。
• 空值判断：增加了加载状态，避免空数组访问下标导致的错误。
• 修正随机函数：直接使用最新的quotes长度生成索引（因为quotes是state，更新后会触发重渲染，这里不会有闭包问题）。
• 补充作者信息：额外展示名言作者，提升体验。

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