React开发MonkeyType克隆时，Quotes API数据无法正常显示

问题原因分析 #

• console.log打印两次：这是React开发环境下严格模式的默认行为，useEffect会被触发两次以检测副作用问题，生产环境会恢复为一次，属于正常现象。
• 渲染时提示quote未定义：组件首次渲染时，quoteList还处于初始状态（空数组），此时quoteList[0]是undefined，直接访问.q就会抛出错误。另外你提供的fetch代码里URL未加引号，这也是语法层面的潜在问题。

解决方案 #

1. 修正初始状态与fetch语法 #

先确保quoteList初始化为空数组，同时给fetch的URL加上引号：

const [quoteList, setQuoteList] = useState([]);

useEffect(() => {
  fetch('https://zenquotes.io/api/quotes')
    .then((res) => res.json())
    .then((data) => setQuoteList(data))
    .catch(err => console.error('数据获取失败:', err)); // 新增错误捕获
}, []);

2. 渲染时添加安全校验 #

两种常用方式避免报错：

方式一：使用可选链操作符（?.）

<div>
  <p>{quoteList[0]?.q}</p>
</div>

可选链会在quoteList[0]为undefined时直接返回undefined，不会继续访问.q，避免报错。

方式二：条件渲染

判断quoteList有数据后再渲染：

<div>
  {quoteList.length > 0 && <p>{quoteList[0].q}</p>}
</div>

当quoteList长度大于0（即已有数据）时才渲染<p>标签，空数组状态下不会执行后续代码。

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