使用 map 方法提取获取的数据

Question

我正在尝试从 newsapi 网站获取数据。 它给我数据作为数组，如 object 格式。

现在，我的目标是迭代此数据并显示我的 newsItem 组件。 下面是我的代码。

export class News extends Component {
    constructor(){
        super()
        this.state = {
            articles: this.articles
        }
    }
    componentDidMount(){
        fetch(`https://newsapi.org/v2/top-headlines?country=us&apiKey=d21fe13361b94006b816f98a7c005003`)
        .then(res =>res.json())
        .then(data => this.setState({articles:data.articles}))
    }
  render() {
    return <div className='container my-3'>
        <h1 className='my-3'>NewsDonkey - Top Headlines</h1>
        <div className="row">
                {this.state.articles.map(element=> console.log(element))}
            <div className="col-md-4">
                <NewsItem/>
            </div>
        </div>
    </div>;
  }
}

export default News;

但是，浏览器显示无法读取未定义的属性。 这是错误图像。

现在，您可能会说数据可能采用 object 格式，这就是 map 方法不起作用的原因。 我在 JS 中尝试了相同的编码：articles.map(element=> console.log(element)) 它完美地提取了数据。 如果您在我的编码中发现任何错误，请帮助我。

Answer 1

this.articles state.articles它是undefined 。

在将来的某个时候，您将为该属性分配一个有用的值，但在那之前您不能将其视为未来的数组，但现在还没有。

测试值并做一些不同的事情。

例如

(!this.state.articles && <Loading />}
{this.state.articles && this.state.articles.map(element=> console.log(element))}