早上好,我在我的应用程序中获取API时遇到了问题,我试图获取JSON对象信息,但我一直得到this.state.data.map不是函数错误,我知道Map应该是数组而不是字符串,但我似乎无法修复代码,因此它会拉入对象而不是字符串信息。我从JSON文件中拉入的API信息如下:
{
"slider":
{
"title": "Slider Title",
"content": "Slider content",
"image": "Slider.jpg",
"displaySlideShow": true,
"displayLearnMoreLink": true
}
"content":
{
"title": "Content Title",
"content": "Content Info",
}
}
这是我在react中编写的代码
class AdminEmailSignups extends Component {
constructor()
{
super();
this.state={ data:[], }
}
componentDidMount()
{
fetch('api/contact').
then((Response)=>Response.json()).
then((findresponse)=>
{
this.setState({ data:findresponse, })
})
}
render()
{
return (
<div className="app flex-row adminsections ">
<Table striped bordered condensed hover responsive>
{
this.state.data.map(function(blog){
return <tbody>
<tr>
<td><span>{blog.slider.title}</span></td>
</tr>
</tbody>
})
}
</Table>
</div>
);
}
}
我想知道是否有人可以审查我的代码,并指出我在正确的方向,以帮助我解决这个问题再次感谢
2条答案
按热度按时间zujrkrfu1#
因为map只对数组有效,所以可以创建一个条件foreach循环来处理这个问题。
或者更快的方法是...
Object.keys(this.state.data).map(blog => {.... })
vwhgwdsa2#
对此进行更新。
假设您在JSON文件中有这个(只包含1个密钥)
您可以使用useEFfect来提取数据。
注意字典中的数组[0],然后你就可以用它来显示实际的数据了。
祝你好运!