所以我正在使用news api的反应,它以JSON的形式提供新闻信息。我希望能够获得JSON新闻的各种不同组件,例如标题的作者。对象或json或数组(我很困惑)看起来像这样:
[{
"status": "ok",
"totalResults": 20,
-"articles": [
-{
-"source": {
"id": "techcrunch",
"name": "TechCrunch"
},
"author": "Catherine Shu",
"title": "After report on “appalling” conditions, Foxconn will investigate plant that makes Amazon devices",
"description": "Foxconn Technology Group says it is investigating a factory it operates that makes Amazon devices, including Kindles, after an in-depth report by advocacy group China Labor Watch criticized its “appalling working conditions,” including excessive hours and ove…",
"url": "https://techcrunch.com/2018/06/10/after-report-on-appalling-conditions-foxconn-will-investigate-plant-that-makes-amazon-devices/",
"urlToImage": "https://techcrunch.com/wp-content/uploads/2018/06/GettyImages-477662146.jpg?w=657",
"publishedAt": "2018-06-11T05:15:08Z"
},
-{
-"source": {
"id": "the-washington-post",
"name": "The Washington Post"
},
"author": null,
"title": "Owners of Detroit's old train station to discuss its future",
"description": "Owners of the vacant, hulking 105-year-old Michigan Central Station are planning to make an announcement about its future.",
"url": "https://www.washingtonpost.com/national/owners-of-detroits-old-train-station-to-discuss-its-future/2018/06/10/cc5f2680-6d2b-11e8-b4d8-eaf78d4c544c_story.html",
"urlToImage": "https://www.washingtonpost.com/resizer/2CjPNwqvXHPS_2RpuRTKY-p3eVo=/1484x0/www.washingtonpost.com/pb/resources/img/twp-social-share.png",
"publishedAt": "2018-06-11T03:59:18Z"
},
-{
-"source": {
"id": null,
"name": "Newsbtc.com"
},
"author": "JP Buntinx",
"title": "Bitcoin Took a Beating but Should be Bouncing Back",
"description": "Bitcoin has taken a serious beating in the last 48 hours with significant drops happening in two legs plunging the price from just above $7,600 to $6,784 at the time of writing according to livecoinwatch.com.",
"url": "https://www.newsbtc.com/2018/06/11/bitcoin-took-beating-bouncing-back/",
"urlToImage": "https://s3.amazonaws.com/main-newsbtc-images/2018/06/11033811/shutterstock_790702930.jpg",
"publishedAt": "2018-06-11T03:45:38Z"
},
-{
-"source": {
"id": null,
"name": "Wgntv.com"
},
"author": "https://www.facebook.com/wgnnews",
"title": "SONIC brings back 'signature' pickle-flavored snow cone slushes",
"description": "OKLAHOMA CITY-- Starting Monday, June 11, SONIC locations will start serving up frozen snow cone slushes made with pickle juice, and other \"signature\" flavors.\r\n\nIn a release, the company says news the signature slush flavor would be returning \"nearly broke t…",
"url": "http://wgntv.com/2018/06/10/sonic-brings-back-signature-pickle-flavored-snow-cone-slushes/",
"urlToImage": "https://tribwgntv.files.wordpress.com/2018/06/pickle.jpg?quality=85&strip=all&w=1200",
"publishedAt": "2018-06-11T03:39:00Z"
},
-{
-"source": {
"id": null,
"name": "Dailycaller.com"
},
"author": null,
"title": "Twitter CEO Caves To Liberal Backlash, Says He Was Wrong To Eat Chick-Fil-A",
"description": "'Please delete this'",
"url": "http://dailycaller.com/2018/06/10/twitter-ceo-chick-fil-a-gay-marriage/",
"urlToImage": "http://cdn01.dailycaller.com/wp-content/uploads/2018/06/Twitter-CEO-Jack-Dorsey-e1528681520236.jpg",
"publishedAt": "2018-06-11T03:16:24Z"
},
-{
-"source": {
"id": null,
"name": "Forbes.com"
},
"author": "Russell Flannery",
"title": "Wuxi Biologics To Open US Plant Amid Tough Trade Talk",
"description": "Investment may involve $60 million",
"url": "https://www.forbes.com/sites/russellflannery/2018/06/10/wuxi-biologics-to-open-u-s-plant-amid-tough-trade-talk/",
"urlToImage": "https://thumbor.forbes.com/thumbor/600x315/https%3A%2F%2Fi.forbesimg.com%2Fmedia%2Fassets%2Fforbes_1200x1200.jpg",
"publishedAt": "2018-06-11T00:54:00Z"
},
-{
-"source": {
"id": "the-washington-post",
"name": "The Washington Post"
},
"author": null,
"title": "Goodbye to net neutrality. Hello to an even-bigger AT&T?",
"description": "Two developments this week could dramatically expand the power of major telecom companies.",
"url": "https://www.washingtonpost.com/business/economy/goodbye-to-net-neutrality-hello-to-an-even-bigger-atandt/2018/06/10/e7c67f56-6cc0-11e8-bf86-a2351b5ece99_story.html",
"urlToImage": "https://www.washingtonpost.com/resizer/8KmT7MObORQyPc-zaJ37y2eo8yM=/1484x0/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/Q3LQNWTLJAI6RHRYETTJHM4GG4.jpg",
"publishedAt": "2018-06-11T00:26:54Z"
},
-{
-"source": {
"id": null,
"name": "Newsbtc.com"
},
"author": "https://www.facebook.com/profile.php?id=100012831007659",
"title": "Bitcoin (BTC) Price Technical Analysis (June 11, 2018)",
"description": "Yesterday we saw BTC prices literally crashing after shedding more than five percent. It might be a reactionary move after CFTC Bitcoin Futures investigations but what is important is how prices react at key support lines. Those levels stand at $7,000 and $7,…",
"url": "https://www.newsbtc.com/2018/06/11/bitcoin-btc-price-technical-analysis-june-11-2018/",
"urlToImage": "https://s3.amazonaws.com/main-newsbtc-images/2018/06/08073847/bitcoins.jpg",
"publishedAt": "2018-06-11T00:15:37Z"
},
-{
-"source": {
"id": "reuters",
"name": "Reuters"
},
"author": "Shinichi Saoshiro",
"title": "Asia stocks wobble after G7; Trump-Kim summit, central bank meetings eyed",
"description": "Asia stocks shook off initial modest losses and edged up on Monday ahead of an historic U.S.-North Korea summit that investors hope might pave the way to ending a nuclear stand-off on the Korean peninsula.",
"url": "https://www.reuters.com/article/us-global-markets/asia-stocks-wobble-after-g7-trump-kim-summit-central-bank-meetings-eyed-idUSKBN1J7007",
"urlToImage": "https://s2.reutersmedia.net/resources/r/?m=02&d=20180611&t=2&i=1271269745&w=1200&r=LYNXMPEE5A004",
"publishedAt": "2018-06-11T00:09:27Z"
},
-{
-"source": {
"id": "bloomberg",
"name": "Bloomberg"
},
"author": "Catherine Bosley",
"title": "Swiss Reject Plan That Would Have Revolutionized Banking",
"description": "Switzerland dismissed a proposal to radically change the way banks lend money, a victory for the financial establishment including central bank chief Thomas Jordan.",
"url": "https://www.bloomberg.com/news/articles/2018-06-10/swiss-reject-plan-that-would-have-revolutionized-banking-ji9fmz44",
"urlToImage": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iI1kN9CmjjT8/v0/1200x839.jpg",
"publishedAt": "2018-06-10T23:01:00Z"
},
-{
-"source": {
"id": "reuters",
"name": "Reuters"
},
"author": "Reuters Editorial",
"title": "Indian billionaire jeweler Nirav Modi flees to UK, claiming political asylum: FT",
"description": "Nirav Modi, the billionaire jeweler at the heart of a more than $2 billion fraud case in India, has fled to the UK, where he is claiming political asylum, the Financial Times reported on Sunday, citing Indian and British officials.",
"url": "https://www.reuters.com/article/us-britain-india-nirav-modi/indian-billionaire-jeweler-nirav-modi-flees-to-uk-claiming-political-asylum-ft-idUSKBN1J610T",
"urlToImage": "https://s3.reutersmedia.net/resources/r/?m=02&d=20180610&t=2&i=1271236652&w=1200&r=LYNXMPEE590XP",
"publishedAt": "2018-06-10T21:35:03Z"
},
-{
-"source": {
"id": "the-wall-street-journal",
"name": "The Wall Street Journal"
},
"author": "Jacob Bunge",
"title": "A Stampede of Meatless Products Overrun Grocery Store Meat Cases",
"description": "Furious cattlemen see the meat section as their turf, a private reserve of steaks and chops with one thing in common—a butchered animal carcass.",
"url": "https://www.wsj.com/articles/a-stampede-of-meatless-products-overrun-grocery-store-meat-cases-1528653236",
"urlToImage": "https://images.wsj.net/im-13667/social",
"publishedAt": "2018-06-10T17:57:15Z"
},
-{
-"source": {
"id": "fortune",
"name": "Fortune"
},
"author": "David Z. Morris",
"title": "Tyson Foods Recalls Frozen Chicken for Possible Plastic Contamination",
"description": "",
"url": "http://fortune.com/2018/06/10/tyson-chicken-recall-plastic/",
"urlToImage": "https://fortunedotcom.files.wordpress.com/2017/06/tyson-chicken-breaded.jpg",
"publishedAt": "2018-06-10T15:35:23Z"
},
-{
-"source": {
"id": "the-verge",
"name": "The Verge"
},
"author": "Elizabeth Lopatto",
"title": "I have a Boring Company Not-A-Flamethrower",
"description": "The flamethrower started as what seemed like a throwaway joke on Twitter, but Elon Musk and The Boring Company did actually make it. I was among the first 1,000 to pick up my very own.",
"url": "https://www.theverge.com/2018/6/10/17445838/boring-company-flamethrower-elon-musk-tweets-party",
"urlToImage": "https://cdn.vox-cdn.com/thumbor/4fUBJXdApyq46NJbbg-dHfMlb_A=/0x0:2040x1068/fit-in/1200x630/cdn.vox-cdn.com/uploads/chorus_asset/file/11510275/llopatto_180609_2658_0068.jpg",
"publishedAt": "2018-06-10T15:09:00Z"
},
-{
-"source": {
"id": "cnbc",
"name": "CNBC"
},
"author": "Jeff Cox",
"title": "The Fed has a surprise in store that could mean an early end to interest rate hikes",
"description": "The Federal Reserve could have a surprise in store for investors next week, even if everyone already knows the central bank is raising interest rates. The policymaking Federal Open Market Committee is expected to announce another change that would signal an e…",
"url": "https://www.cnbc.com/2018/06/08/fed-has-surprise-that-could-mean-early-end-to-interest-rate-hikes.html",
"urlToImage": "https://fm.cnbc.com/applications/cnbc.com/resources/img/editorial/2018/03/21/105080472-RTS1ONSL.1910x1000.jpg",
"publishedAt": "2018-06-10T13:02:17Z"
},
-{
-"source": {
"id": null,
"name": "Latimes.com"
},
"author": "Meg James",
"title": "Brian Roberts has been the force behind Comcast's growth. Now he's in the hunt for Fox",
"description": "Comcast CEO Brian Roberts is determined to bulk up his company — and that might mean scooping up much of Rupert Murdoch's media empire. \"This is very personal for Brian,\" said his longtime lieutenant Steve Burke.",
"url": "http://www.latimes.com/business/hollywood/la-fi-ct-brian-roberts-comcast-20180610-htmlstory.html",
"urlToImage": "http://www.latimes.com/resizer/dDO6-HPJ9ju6TSMYIrp048Gbu4M=/1200x0/arc-anglerfish-arc2-prod-tronc.s3.amazonaws.com/public/5OIJLZ662BCJ7BBHFTHEWL2PFM.jpg",
"publishedAt": "2018-06-10T12:01:13Z"
},
-{
-"source": {
"id": null,
"name": "Fool.com"
},
"author": "Keith Speights",
"title": "3 Investing Tips From Warren Buffett That You Shouldn't Ignore",
"description": "Great investing advice from one of the greatest investors of all time.",
"url": "https://www.fool.com/investing/2018/06/10/3-investing-tips-from-warren-buffett-that-you-shou.aspx",
"urlToImage": "https://g.foolcdn.com/image/?url=https%3A%2F%2Fg.foolcdn.com%2Feditorial%2Fimages%2F484681%2Fwarren-buffett-tmf-photo-2.jpg&h=630&w=1200&op=resize",
"publishedAt": "2018-06-10T10:32:25Z"
},
-{
-"source": {
"id": null,
"name": "Shropshirestar.com"
},
"author": null,
"title": "G7 members sign joint communique despite US trade tensions",
"description": "Canadian PM Justin Trudeau said the seven leaders had reached agreement on ‘consensus language’.",
"url": "https://www.shropshirestar.com/news/world-news/2018/06/09/g7-members-sign-joint-communique-despite-us-trade-tensions/",
"urlToImage": "https://www.shropshirestar.com/resizer/0Kp-727irloUzDQ7S4rsHNpQnfA=/1200x0/filters:quality(100)/https%3a%2f%2farc-anglerfish-arc2-prod-shropshirestar-mna.s3.amazonaws.com%2fpublic%2fCGU7SHMC7VHA3FBBZ6OPW755KU.jpg",
"publishedAt": "2018-06-09T22:59:13Z"
},
-{
-"source": {
"id": "the-new-york-times",
"name": "The New York Times"
},
"author": "https://www.nytimes.com/by/cade-metz",
"title": "Mark Zuckerberg, Elon Musk and the Feud Over Killer Robots",
"description": "As the tech moguls disagree over the risks presented by something that doesn’t exist yet, all of Silicon Valley is learning about unintended consequences of A.I.",
"url": "https://www.nytimes.com/2018/06/09/technology/elon-musk-mark-zuckerberg-artificial-intelligence.html",
"urlToImage": "https://static01.nyt.com/images/2018/06/10/business/10MUSK/10MUSK-facebookJumbo.gif",
"publishedAt": "2018-06-09T09:00:15Z"
},
-{
-"source": {
"id": "cbs-news",
"name": "CBS News"
},
"author": "AP",
"title": "Kia recalls more than 500000 vehicles -- air bag may not inflate",
"description": "U.S. safety regulators says four people were killed and others injured following front-end crashes",
"url": "https://www.cbsnews.com/news/kia-recalls-more-than-500000-vehicles-air-bag-may-not-inflate/",
"urlToImage": "https://cbsnews1.cbsistatic.com/hub/i/r/2016/06/17/43ec7b9a-f7a8-40a3-9c58-d6c1d92d56de/thumbnail/1200x630/6e37f23635d706b05ceca3838187cb97/gettyimages-451098743.jpg",
"publishedAt": "2018-06-08T17:29:00Z"
}
]
}]
当我做<Text>{this.state.articles}</Text>
时(如果它是一个对象或数组,那么它是带有信息idk的变量,我很困惑)。它给了我错误
Objects are not valid as a React child( found: object with keys {source, author, title... }
我不知道如何操纵大量的信息。如果你能告诉我如何获得标题,作者和那些单独的信息,或者告诉我一个可以帮助我的教程,我将非常高兴。
谢谢你, 陷入困境的程序员
答案 0 :(得分:1)
this.state.articles
是一个数组,不能转换为字符串
但如果想要有新闻列表
你应该使用平面列表来轻松处理数据
<FlatList
showsVerticalScrollIndicator={false}
style={{width: 75 * vw, }}
data={this.state.articles}
ListEmptyComponent={this.renderEmpty}
scrollEventThrottle={16}
removeClippedSubviews={true}
renderItem={({item}) =>
<ItemView
keyExtractor={this._keyExtractor}
title={item.title}
description={item.description}
url={item.url}
}
/>
您应该在其他地方定义ItemView
并导入以获取更多信息https://facebook.github.io/react-native/docs/flatlist.html
答案 1 :(得分:0)
如API所示,articles
会有一个单独的文章列表,其类型为object
。它的密钥为author
,title
,description
等等。
当您放置<Text>{this.state.articles}</Text>
时,表示您将数组投放到Text
Component
,这就是您收到错误的原因。
由于articles
是array
个对象,您可以为作者执行<Text>{this.state.articles[0].author}</Text>
等等。