当项目是一个数组时，React items.map 不是一个函数?

Question

加载API，我得到.map不是一个函数。一直在查看每个示例并完全遵循它们，但仍然收到此错误。错误当然发生在 ul 标签中的.map

class Login extends Component {
constructor(props) {
super(props);
this.state = {
items: [],
isLoaded: false
};
}
componentDidMount() {
fetch(
"https://opentdb.com/api.php?amount=10&category=18&difficulty=easy&type=boolean"
)
.then(res => res.json())
.then(json => {
this.setState({ isLoaded: true, items: json });
});
}
render() {
var { isLoaded, items } = this.state;
if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
<div className="App">
<ul>
{items.map(item => (
<li key={item.results.question}>{item.results.question}</li>
))}
</ul>
</div>
);
}
}
}
export default Login;

Answer 1

您的实际数据正在json.results，因此您需要将json.results设置为如下状态，

this.setState({ isLoaded: true, items: json.results });

你需要像这样迭代数组，

{ items.map(item => (
<li key={item.question}>{item.question}</li>
))}

演示