我尝试映射如下图所示的 API：

目前我的代码已设置好，因此我可以调用我选择的任何数字的标题、来源和图片。即，如果我这样做

const headline = res.data[0]['headline'];
this.setState({ headline })

我可以获得名称为“0”的第一个标题

const headline = res.data[1]['headline'];
this.setState({ headline })

然后我可以获得名称为“1”的第二个标题。

但我不会编写 5-10 次相同的代码，而是尝试映射它，以便我可以返回每个版本的切片，数量为我想要的数量。我不知道如何设置语法，因为我想我会做类似的事情：

<h1>
{
res.data.length && res.data.map(data =>  (
{data.headline}
))
}
</h1>

我得到 res.data 没有定义，因为我在返回中这样做了，而不是在 getStock 下，不确定如何设置它。

News.js

import React, { Component } from 'react'
import axios from "axios"

export class News extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            headline: "",
            source: "",
            image: ""
        }
    }

    componentDidMount() {
        this.getStock();
    }

    getStock() {
        const API_KEY = '*********************';
        const API_CALL = `https://cloud.iexapis.com/stable/stock/aapl/news?token=${API_KEY}`;
        axios.get(API_CALL)
        .then(res => {
            const headline = res.data[1]['headline'];
            this.setState({ headline })

            const source = res.data[1]['source'];
            this.setState({ source })

            const image = res.data[1]['image'];
            this.setState({ image })
        })
    }

    render() {
        return (
            <div>
                <h1>{this.state.headline} </h1>
                <p>{this.state.source}</p>
                <img src={this.state.image} alt="img" />
            </div>
        )
    }
}

export default News