我正在React中克隆一个MonkeyType,因为我真的很喜欢这个设计,我想练习我的打字。
我决定使用一个API来输入一些东西,但是我卡住了。我的备份计划是从chatGPT中抓取一些模拟数据,但是它已经满负荷了(永远?),所以我就在这里了。
我可以用console.log来记录我从API中获取的引用列表(console.log执行了两次,这很奇怪),但是当我试图显示随机列表中的第一个引用时,我得到了一个错误,即该引用未定义。
[
{ q: "",
a: "",
h: "",
c: "",
},
...,
]
实际上我并没有把代码放在我的面前(我在工作电脑上),但基本上创建了一个新的react项目,导入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条答案
按热度按时间vu8f3i0k1#
在react中不能直接将对象放入JSX,如果将{quoteList[0].q}更改为{JSON.stringify(quoteList[0].q)},它应该可以工作!