React返回空状态

Question

我知道useEffect((钩子应该在第一次渲染时触发。在我的代码中，我因无法使用States属性而出现错误。这是因为State在DOM呈现之前没有API数据。我想我只是不明白我是否遗漏了什么，但控制台日志显示，在实际获取任何数据之前，问题数组两次为空。如果我不想在任何地方访问数据，就不会抛出任何数据，但一旦我尝试使用它，代码就会说数据不存在。我尝试使用async，但得到了相同的错误。

export default function Quiz(props) {
const [questions, setQuestions] = React.useState([])
React.useEffect(() => {
fetch("https://opentdb.com/api.php?amount=10")
.then(res => res.json())
.then(data => setQuestions(data.results))
}, [])
console.log(questions)
return (
<div>
<div className="quiz--question">
<h1>{questions.category}</h1>
</div>
</div>
)
}

Answer 1

questions是一个数组，因此需要对其进行迭代以显示值。你可以使用地图

import * as React from 'react';
import './style.css';
export default function App() {
const [questions, setQuestions] = React.useState([]);
React.useEffect(() => {
fetch('https://opentdb.com/api.php?amount=10')
.then((res) => res.json())
.then((data) => {
setQuestions(data.results);
console.log(questions);
});
}, []);
return (
<div>
{questions.map((elem) => (
<div className="quiz--question">
<h1>{elem.category}</h1>
</div>
))}
</div>
);
}

此处演示