使用React Hooks显示API

Question

我试图从这个cat事实API https://catfact.ninja/facts?limit=15显示事实列表。

我已经取得数据，并看到事实，0-14，显示在控制台中。我创建了一个map()来遍历数组，但只有第一个事实会显示在列表上。谢谢你的帮助!

import React, { useState, useEffect } from 'react';
const url = 'https://catfact.ninja/facts?limit=15';
const Index = () => {
const [factList, setFactList] = useState([]);
useEffect(() => {
getList()
},[]);
const getList = () => {
fetch(url)
.then((res) => res.json())
.then((list) => {
console.log('List:', list);
const [factList] = list.data

setFactList([factList])
})
.catch((err) => {
console.log('List ERROR ', err);
})
}

return (
<div className='App'>
<h1>FACT LIST</h1>
<ul>
{factList.map((item, index) => 

<li key={index}> {item.fact} </li>

)}

</ul>

</div>
)
}
export default Index

输入图片描述

Answer 1

将获取函数更改为:

const getList = () => {
fetch(url)
.then((res) => res.json())
.then((list) => {
setFactList(list.data);
})
.catch((err) => {
console.log("List ERROR ", err);
});
};

const [factList] = list.data;导致只有数组的第一个元素被赋值给factList。阅读更多关于JS中的解构。