Javascript 映射React中的API数据

我正在尝试映射一个API，该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.length&&res.data.map（数据=>(
{data.headline}
))
}

我得到了res.data没有定义，因为我在return和getStock中没有这样做，不知道如何设置它

新闻网

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

import React，{Component}来自“React”
从“axios”导入axios
导出类News扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
标题：“，
资料来源：“，
图像：“
}
}
componentDidMount（）{
这个.getStock（）；
}
getStock（）{
常量API_KEY='***********************'；
常量API_调用=`https://cloud.iexapis.com/stable/stock/aapl/news?token=${API_KEY}`；
获取（API_调用）
。然后（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（）{
返回(
{this.state.headline}
{this.state.source}

)
}
}
导出默认新闻

您第一次使用

.map

接近是正确的，您只需确保检查

res

是否存在

res && res.data.length && res.data.map(data =>  ...

---

您使用

.map

的第一个方法是正确的，您只需确保检查

res

是否存在

res && res.data.length && res.data.map(data =>  ...

---

问题是

res

包含在

getStock

中，因此@Caleb需要更改其状态以接受响应，然后在

render

中使用state中的响应。在getStock下是这样的：

const res=res；此.setState（res）

。该代码返回错误，但想法正确maybe@EliasSchablowski如果你能给我一个非常有用的示例代码，因为我仍在努力解决这个问题。@Caleb只要去掉括号

）

{this.state.map（news=>news.headline）}

问题是

res

包含在

getStock

中，因此@Caleb需要改变他的状态来接受响应，然后在

render

中使用state中的响应，在getStock下是这样的：

const res=res；此.setState（res）

。该代码返回错误，但想法正确maybe@EliasSchablowski如果你能给我一个非常有用的示例代码，因为我仍然在努力解决这个问题。@Caleb只需删除括号

）

{this.state.map（news=>news.headline）}