Reactjs 如何在jsx中打印响应Json数据

我想在jsx中呈现标题和描述（驻留在数据-->提要->标题或描述中） 还希望呈现每个标题和每个发布日期（驻留在数据->项目[array]->标题和发布日期中）

import React，{useState，useffect}来自“React”
从“axios”导入axios；
函数仪表板（）{
const[posts，setPosts]=useState（[]）
useffect（（）=>{
axios.get（）https://api.rss2json.com/v1/api.json?rss_url=http%3A%2F%2Frss.cnn.com%2Fservices%2Fpodcasting%2Fstudentnews%2Frss.xml')
。然后（res=>{
console.log（res）
设置柱（res.data）
})
.catch（错误=>{
console.log（错误）
})
},[])
返回(
)
}

您可能正在尝试这样做

return(
    <div className="App">

        <div> {posts.feed && posts.feed.title} </div>
        <div> {posts.feed && posts.feed.description} </div>


        <div>
            {posts.items &&  posts.items.map ( postItem => <div> {postItem.title} </div> ) } 
        </div>
        
    </div>  
    
   )

返回(
{posts.feed&&posts.feed.title}
{posts.feed&&posts.feed.description}
{posts.items&&posts.items.map（positem=>{positem.title}）}
)

您可能正在尝试这样做

return(
    <div className="App">

        <div> {posts.feed && posts.feed.title} </div>
        <div> {posts.feed && posts.feed.description} </div>


        <div>
            {posts.items &&  posts.items.map ( postItem => <div> {postItem.title} </div> ) } 
        </div>
        
    </div>  
    
   )

返回(
{posts.feed&&posts.feed.title}
{posts.feed&&posts.feed.description}
{posts.items&&posts.items.map（positem=>{positem.title}）}
)

因此，首先我建议您制作screens类组件，然后您可以将子组件制作为上述功能组件。因此，您可以创建一个异步函数来发出请求并将数据获取到状态

为什么您不能读取“标题”的属性？ 因为当您加载组件时，它会立即查找您的posts数组。它一开始是空的，它需要一些时间来发出请求并用接收到的数据填充数组，这就是为什么我相信您会遇到这个错误。 所以，试着像下面这样做

{posts.length && post.map .... .... ... 

---

首先，我建议您制作screens类组件，然后您可以将子组件制作为上述功能组件。因此，您可以创建一个异步函数来发出请求并将数据获取到状态

为什么您不能读取“标题”的属性？ 因为当您加载组件时，它会立即查找您的posts数组。它一开始是空的，它需要一些时间来发出请求并用接收到的数据填充数组，这就是为什么我相信您会遇到这个错误。 所以，试着像下面这样做

{posts.length && post.map .... .... ... 

像这样尝试：

return(
    <div className="App">
    { 
     
        (posts.items!==undefined && posts.items.length>0) && posts.items.map ( ele=> {
                        return (<div>{ele.title} - {ele.pubDate} </div> )}) 
     
    }
        
    </div>  
    
   )

返回(
{ 
（posts.items！==未定义和&posts.items.length>0）和&posts.items.map（ele=>{
返回（{ele.title}-{ele.pubDate}）}）
}
)

像这样尝试：

return(
    <div className="App">
    { 
     
        (posts.items!==undefined && posts.items.length>0) && posts.items.map ( ele=> {
                        return (<div>{ele.title} - {ele.pubDate} </div> )}) 
     
    }
        
    </div>  
    
   )

返回(
{ 
（posts.items！==未定义和&posts.items.length>0）和&posts.items.map（ele=>{
返回（{ele.title}-{ele.pubDate}）}）
}
)

Hi Mohammad，如果我尝试将其抛出错误编码为TypeError:Undefinedt的属性“title”无法读取，那么您必须提供从api获得的准确响应模型。你能提供一个吗？嗨，Mohammad，我分享了API响应Hi Mohammad，它的工作是为了标题和描述，但是对于项目标题和发布日期，它的显示如下positem.title positem.title positem.title positem.title positem.title positem.titlesorry现在有一个错误检查Hi Mohammad，如果我尝试将其抛出错误作为TypeError进行编码：当您必须提供从api获得的确切响应模型时，无法读取unfinedt的属性“title”。你能提供一个吗？嗨，Mohammad，我共享了API响应Hi Mohammad，它用于标题和描述，但用于项目标题和发布日期，其显示方式如下postItem.title postItem.title postItem.title postItem.titlesorry现在有一个错误检查Hi，请共享你的API响应结构巴拉，尝试将JSON响应作为代码。停止放照片。您提供的信息不足，这让人们很难帮助您。而且，您似乎是第一次在JSX中使用JSON。你为什么要从这么复杂的事情开始？从本地json数据文件开始，然后升级到类似这样的复杂文件。在行走之前运行，嗯？嗨，请分享你的API响应结构巴拉，尝试将JSON响应作为代码。停止放照片。您提供的信息不足，这让人们很难帮助您。而且，您似乎是第一次在JSX中使用JSON。你为什么要从这么复杂的事情开始？从本地json数据文件开始，然后升级到类似这样的复杂文件。行走前运行，嗯？嗨，Priyanks，我共享了我的API响应Hi Priyanka，对于上面的代码，它的抛出类型错误：无法读取未定义的Priyanks的属性'length'，我共享了我的API响应Hi Priyanka，对于上面的代码，它的抛出类型错误：无法读取未定义的属性'length'