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

【问题标题】：How to print response Json data in jsx如何在jsx中打印响应Json数据
【发布时间】：2020-09-20 17:03:49
【问题描述】：

我想在 jsx 中呈现标题和描述（驻留在 data-->feed->title 或 Description 中）还想渲染每个标题和每个发布日期（驻留在 data->items[array]->title 和发布日期）

import React,{useState,useEffect} from 'react'
import axios from 'axios';

function Dashboard(){
    const[posts,setPosts] = useState([])

    useEffect(()=>{
        axios.get('https://api.rss2json.com/v1/api.json?rss_url=http%3A%2F%2Frss.cnn.com%2Fservices%2Fpodcasting%2Fstudentnews%2Frss.xml')
        .then(res=> {
            console.log(res)
            setPosts(res.data) 
        })
        .catch(err=>{
            console.log(err)
        })
    },[])
    return(
        <div className="App">
            
        </div>  
        
       )
}

【问题讨论】：

您好，请分享您的 API 响应结构
巴拉，尝试将 JSON 响应作为代码。别放照片了。您提供的信息不足，只会让人们更难帮助您。
另外，看起来你是第一次在 JSX 中做 JSON。为什么要从如此复杂的事情开始？从本地 json 数据文件开始，然后升级到像这样复杂的东西。先跑再走，嗯？

标签： reactjs react-native react-redux react-router

【解决方案1】：

也许你正在尝试做这样的事情？

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>  
    
   )

【讨论】：

嗨 Mohammad，如果我尝试使用你的代码，它的抛出错误为 TypeError: Cannot read property 'title' of undefined
那么你必须提供你从你的 api 得到的确切响应模型。可以提供一份吗？
嗨 Mohammad 我分享了 API 响应
嗨 Mohammad，它适用于标题和描述，但适用于项目标题和发布日期，其显示如下 postItem.title postItem.title postItem.title postItem.title
抱歉现在检查有误

【解决方案2】：

因此，首先我建议您将屏幕类组件制作为类组件，而不是像上面那样将您的子组件制作为功能组件。因此，您可以创建一个异步函数来发出请求并将数据获取到状态。

为什么您无法读取“标题”的属性？因为当您加载组件时，它会立即查找您的帖子数组。一开始它是空的它需要一些时间来提出请求并用收到的数据填充你的数组，这就是我相信你得到这个错误的原因。所以像下面这样试试吧

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

【讨论】：

【解决方案3】：

试试看：

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

【讨论】：

嗨 Priyanks，我分享了我的 API 响应
嗨 Priyanka，对于上面的代码，它抛出 TypeError: Cannot read property 'length' of undefined