javascript - 从 JSON API React Native 打印值
问题描述
所以我正在使用一个新闻 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>（如果它是一个对象或数组，它是带有 info idk 的变量，我很困惑）。它给了我错误
Objects are not valid as a React child( found: object with keys {source, author, title... }
我不知道如何操纵如此庞大的信息量。如果你能告诉我如何获得标题、作者和单独的信息，或者指导我找到可以帮助我的教程，我会很高兴。
谢谢你，麻烦的程序员
解决方案
this.state.articles是一个数组，它不能转换为字符串
，但如果想要有新闻列表，你应该使用 flatlist 来轻松处理数据
<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