javascript - React 应用程序尝试绑定(bind)到 View 时出错

Question

我是 React 新手，我从 API 获取数据，然后尝试显示该数据，但收到错误:

TypeError: this.state.data.map is not a function

Component.js

import React, { Component } from 'react';
import '../about/about.css';

class About extends Component {

    state = {
        loading: false,
        data: []
    }

    componentDidMount() {
        this.setState({ loading: true })
        console.log('app mounted');
        fetch('https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=8ee8c21b20d24b37856fc3ab1e22a1e5')
            .then(data => data.json())
            .then(data => this.setState({ data, loading: false }))
    }

    render() {
        return (
            <div className="about">
                {this.state.loading
                    ? "loading..."
                    : <div >
                        {this.state.data.map(post => {
                            return (
                                <div className="container about text-left mt-5" key={post.id}>
                                    <div>
                                        <h5>{post.title}</h5>
                                        <p>{post.description}</p>
                                    </div>
                                </div>
                            )
                        })}

                    </div>
                }
            </div>
        )
    }
}
export default About;

API 数据架构为:

{
"status": "ok",
"totalResults": 70,
-"articles": [
-{
-"source": {
"id": "cnn",
"name": "CNN"
},
"author": "Chris Isidore, CNN Business",
"title": "FedEx problems go beyond its split with Amazon - CNN",
"description": "FedEx and Amazon have been going through a very public divorce. But that's not the biggest problem for iconic delivery company.",
"url": "https://www.cnn.com/2019/12/18/business/fedex-amazon-outlook/index.html",
"urlToImage": "https://cdn.cnn.com/cnnnext/dam/assets/191218141028-01-fedex-delivery-truck-0807-super-tease.jpg",
"publishedAt": "2019-12-18T22:08:00Z",
"content": null
},
-{
-"source": {
"id": "cbs-news",
"name": "CBS News"
},
"author": "Aimee Picchi",
"title": "Downward tilting toilet is designed to shorten your bathroom break - CBS News",
"description": "StandardToilet's seat angles toward the floor, making it uncomfortable to sit for more than a few minutes.",
"url": "https://www.cbsnews.com/news/downward-tilting-toilet-may-cut-down-on-long-bathroom-breaks/",
"urlToImage": "https://cbsnews3.cbsistatic.com/hub/i/r/2019/12/18/a6ad8eb9-6084-4299-9289-3e0c269697de/thumbnail/1200x630/725f98269da8d5b25032449ebbb3e1ee/standard-toilet-no-1002.jpg",
"publishedAt": "2019-12-18T21:45:00Z",
"content": "Your bathroom break may soon become less comfy — and shorter — due to a new downward-tilting toilet aimed at making it tough to sit for more than five minutes. \r\nStandardToilet, based in the U.K., claims people spend 25% more time in office bathrooms than nec… [+1826 chars]"
},
-{
-"source": {
"id": null,
"name": "Jalopnik.com"
},
"author": "Kristen Lee",
"title": "Delta's New Uniforms Are Giving Attendants 'Skin Lesions, Fatigue, Migraines, Hair Loss': Report - Jalopnik",
"description": "Delta’s crew of flight attendants are easily distinguishable because of their deep purple and gray uniforms. But a recent, nightmarish report from Business Insider asserts these uniforms might be the cause of mysterious illnesses and ailments among Delta empl…",
"url": "https://jalopnik.com/deltas-new-uniforms-are-giving-attendants-skin-lesions-1840512868",
"urlToImage": "https://i.kinja-img.com/gawker-media/image/upload/c_fill,f_auto,fl_progressive,g_center,h_675,pg_1,q_80,w_1200/ivuzhac1dhgnfmr4fuy8.jpg",
"publishedAt": "2019-12-18T21:20:00Z",
"content": "Deltas crew of flight attendants are easily distinguishable because of their deep purple and gray uniforms. But a recent, nightmarish report from Business Insider asserts these uniforms might be the cause of mysterious illnesses and ailments among Delta emplo… [+4104 chars]"
},
-{
-"source": {
"id": null,
"name": "Yahoo.com"
},
"author": null,
"title": "Micron beats quarterly earnings estimates on higher memory demand - Yahoo Finance",
"description": "Shares of Micron rose nearly 4% in extended trading, after its quarterly earnings beat Wall Street estimates on an uptick in demand for memory chips after a tepid year.  \"We applied for, and recently received all requested licenses that enable us to provide s…",
"url": "https://finance.yahoo.com/news/micron-beats-quarterly-revenue-estimates-211255200.html",
"urlToImage": "https://s.yimg.com/uu/api/res/1.2/uqwJlBivrBy.2phwMZzj9w--~B/aD01MzM7dz04MDA7c209MTthcHBpZD15dGFjaHlvbg--/https://media.zenfs.com/en-US/reuters-finance.com/7256e2d01a13c4018bd074ee85d85267",
"publishedAt": "2019-12-18T21:12:00Z",
"content": "(Reuters) - Micron Technology Inc said on Wednesday it had received all requested licenses to supply some products to its largest customer, China's Huawei, a huge relief for the chipmaker that has been struggling amid a slowing memory market.\r\nShares of Micro… [+2000 chars]"
},
-{
-"source": {
"id": null,
"name": "Marketwatch.com"
},
"author": "Mark DeCambre",
"title": "One of the most successful stock-market investors says these 3 events ‘would definitely trigger a bear market’ - MarketWatch",
"description": "Stanley Druckenmiller, one of Wall Street’s most successful investors, acknowledges that the markets are riding high and that investors may be able to...",
"url": "https://www.marketwatch.com/story/one-of-wall-streets-most-successful-investors-says-these-3-events-would-definitely-trigger-a-bear-market-2019-12-18",
"urlToImage": "http://s.marketwatch.com/public/resources/MWimages/MW-HK736_drucke_ZG_20190604073854.jpg",
"publishedAt": "2019-12-18T21:04:00Z",
"content": "Stanley Druckenmiller, one of Wall Streets most successful investors, acknowledges that the markets are riding high and that investors may be able to finally breathe freely in the short term after a number of shocks, but says investors should be wary of three… [+3137 chars]"
},
-{
-"source": {
"id": null,
"name": "Newsbtc.com"
},
"author": null,
"title": "Why Bitcoin is Perfectly on Track for Parabolic Cycle Despite 50% Drop - newsBTC",
"description": "Analysts are noting that Bitcoin may be positioned for further gains in the near-term, as BTC's parabolic trend cycle has still remained firmly in tact.",
"url": "https://www.newsbtc.com/2019/12/18/why-bitcoin-is-perfectly-on-track-for-parabolic-cycle-despite-50-drop/",
"urlToImage": "https://www.newsbtc.com/wp-content/uploads/2019/12/shutterstock_547238893-1200x780.jpg",
"publishedAt": "2019-12-18T21:01:31Z",
"content": "Bitcoin experienced a sharp and sudden drop earlier this morning that led the crypto as low as $6,400, and its reaction to this level has provided some much-needed validation for embattled bulls who feared that BTC would experience significantly further losse… [+2766 chars]"
},

等等等等

有什么想法吗？

Answer 1

.then(data => this.setState({ data, loading: false })) 大概就是这样。为了使 map 正常工作，this.state.data 的结构应该是数组。看来您正在使用数据 json 覆盖您的数据状态。

我假设您想提取文章？如果我没记错的话，data: data.articles 在同一行。