来自报价 API 的 API 数据未显示在 React 应用程序上答案

【问题标题】：API Data from quotes API not displaying on React app来自报价 API 的 API 数据未显示在 React 应用程序上
【发布时间】：2023-01-25 00:41:59
【问题描述】：

我正在 React 中制作一个 MonkeyType 克隆，因为我真的很喜欢这个设计并且我想练习我的打字。

我决定使用引号 API 来输入内容，但我卡住了。我的备份计划是从 chatGPT 获取一些模拟数据，但它已满（永远？），所以我来了。

我可以 console.log 使用 fetch 从 API 获取的报价列表（它执行 console.log 两次，这很奇怪），但是当我尝试显示随机列表中的第一条报价时，我收到一条错误消息，该报价未定义。来自api的名言数组结构如下：

[
  { q: "",
    a: "",
    h: "",
    c: "",
  },
  ...,
]

我实际上没有我的代码在我面前（我在我的工作电脑上），但基本上制作一个新的反应项目，导入 useState 和 useEffect（为你的状态制作一个空数组），所以 javascript 之前是这样的回报：

useEffect(() => {
fetch(https://zenquotes.io/api/quotes).then((res) => res.json()).then((data) => setQuoteList(data))
}, [])

然后，在回报中：

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

我尝试更改 quoteList 的结构，以便显示一些内容，但到目前为止还没有。我可以 console.log 随机引号很好，我只是无法从我在 React 中的状态显示它。

【问题讨论】：

【解决方案1】：

你不能在 React 中直接将对象放入 JSX 中。如果将 {quoteList[0].q} 更改为 {JSON.stringify(quoteList[0].q)}，它应该可以工作！

【讨论】：