反应：如何在获取的 JSON 文件中获取第一个项目的数据

Question

我试图从JSON文件中的第一个对象获取数据。

const apiUrl =
'https://opentdb.com/api.php?amount=10&difficulty=hard&type=boolean';
function App() {
const [items, setItems] = useState([]);
useEffect(() => {
async function fetchData() {
await fetch(apiUrl)
.then((res) => {
return res.json();
})
.then((data) => {
setItems(data.results);
console.log(data.results);
})
.catch((error) => {
console.log(error);
});
}
fetchData();
}, []);
return (
<div>
<h2>First Item Category: {items[0].category}</h2>
</div>
);
}
export default App;

然而，我一直得到错误&;TypeError: Cannot read properties of undefined (reading 'category')。&;

有谁能帮我理清这个问题吗?谢谢你！

Answer 1

您需要检查items是否存在，因为该组件在请求结束之前呈现

if(!items.length) return <></> {/*u can use loader here*/}
return (
<div>
<h2>First Item Category: {items[0].category}</h2>
</div>
);

或

return (
<div>
<h2>First Item Category: {items[0]?.category}</h2>
</div>
);