React访问API数据quoteData[0].text报Uncaught TypeError怎么办

云原生阿岚

2026-8-30

报错原因

useEffect内的接口请求是异步执行的，组件首次挂载渲染时，请求还未返回，此时quoteData的值是你初始化时传入的空对象{}
对空对象取索引0得到的是undefined，直接读取undefined的.text属性就会触发类型错误
你当前的逻辑把整个接口返回的名言数组全存在了state里，没有做随机筛选逻辑，即使解决报错也无法实现随机生成名言的需求

修复步骤

修正state初始值：接口返回的是数组类型，初始值不要设为空对象，改为空数组[]，保持类型一致
增加兜底判断：数据加载完成前不要读取数组内容，可以加加载态提示，或者用可选链操作符?.做安全访问
补充随机取值逻辑：拿到完整名言数组后，生成随机索引取出单条名言用于展示

可直接运行的修正代码

import { useState, useEffect } from 'react';

function App() {
  // 初始值改为空数组，匹配接口返回的数组结构
  const [quoteList, setQuoteList] = useState([]);
  const [activeQuote, setActiveQuote] = useState(null);

  // 随机切换名言的方法
  const switchRandomQuote = () => {
    const randomIdx = Math.floor(Math.random() * quoteList.length);
    setActiveQuote(quoteList[randomIdx]);
  }

  useEffect(() => {
    fetch('https://type.fit/api/quotes')
      .then(res => res.json())
      .then(data => {
        setQuoteList(data);
        // 首次拿到数据后生成第一条随机名言
        const randomIdx = Math.floor(Math.random() * data.length);
        setActiveQuote(data[randomIdx]);
      })
  }, []);

  // 数据未加载完成时展示加载提示
  if (!activeQuote) {
    return <div>加载中...</div>
  }

  return (
    <div>
      <p>{activeQuote.text}</p>
      <p>—— {activeQuote.author ?? '佚名'}</p>
      <button onClick={switchRandomQuote}>换一条名言</button>
    </div>
  )
}

export default App;