Reactjs React获取和显示数据问题

我是一个新的反应者，尝试着练习，我面临着一个问题。 我想从黑客新闻中获取数据，并显示内容

好的，获取部分是可以的，我用我想要的内容获取我想要的URL。但当我试图展示它时，什么也没发生。如果我记录了内容，我可以看到它，但是我不能用HTML显示它

有人对此有想法吗

这是密码

setUrls () {

        // Define API base URL
        let baseUrl = "https://hacker-news.firebaseio.com/v0/item/";

        // IDs of stories
        const ids = [22694891,22693792,22696252,22697212,22695174,22660888,22689301,22695264];

        // Empty Array for content
        const cards = []

        for (let i = 0; i < ids.length; i++){
            fetch(baseUrl + ids[i] + ".json")
            .then(response => response.json())
            .then((data) => {
                cards.push(data);  
            })
        }
        this.setState({
            cards: cards
        })
    }

    componentDidMount () {
        this.setUrls();
    }

    render() {
        let cards = this.state.cards;
        console.log(cards)

        return (
            cards.map(card => {
                return (
                    <div>{card.id}</div>
                )
            })
        )
    }

setURL（）{
//定义API基URL
让baseUrl=”https://hacker-news.firebaseio.com/v0/item/";
//故事集
常量ID=[226948912269379222696252226972122269517422660882268930122695264]；
//内容的空数组
常量卡=[]
for（设i=0；iresponse.json（））
。然后（（数据）=>{
卡片。推送（数据）；
})
}
这是我的国家({
卡片：卡片
})
}
组件安装（）{
这个.setURL（）；
}
render（）{
让cards=this.state.cards；
控制台日志（卡片）
返回(
cards.map（card=>{
返回(
{card.id}
)
})
)
}

---

在render（）中，当我记录状态时，我可以看到它，但是HTML是空的。

我重构了代码。试试看

setURL（）{
//定义API基URL
让baseUrl=”https://hacker-news.firebaseio.com/v0/item/";
//故事集
常量ID=[
22694891,
22693792,
22696252,
22697212,
22695174,
22660888,
22689301,
22695264,
];
id.forEach（（id）=>{
fetch（`${baseUrl}${id}.json`）
.then（response=>response.json（））
。然后（（数据）=>{
this.setState（（{cards}）=>({
卡片：[……卡片，数据]
}));
})
.catch（（{message}）=>{
控制台错误（消息）；
});
});
}
组件安装（）{
这个.setURL（）；
}
render（）{
const{cards}=this.state；
返回(
cards.map（card=>(
{card.id}
))
)
}

我重构了您的代码。试试看

setURL（）{
//定义API基URL
让baseUrl=”https://hacker-news.firebaseio.com/v0/item/";
//故事集
常量ID=[
22694891,
22693792,
22696252,
22697212,
22695174,
22660888,
22689301,
22695264,
];
id.forEach（（id）=>{
fetch（`${baseUrl}${id}.json`）
.then（response=>response.json（））
。然后（（数据）=>{
this.setState（（{cards}）=>({
卡片：[……卡片，数据]
}));
})
.catch（（{message}）=>{
控制台错误（消息）；
});
});
}
组件安装（）{
这个.setURL（）；
}
render（）{
const{cards}=this.state；
返回(
cards.map（card=>(
{card.id}
))
)
}

哇，非常感谢！它起作用了！现在，我可以阅读代码来理解差异以及我的代码不起作用的原因；）1.在ReactJS中，不要使用Array.prototype.push（）。2.您创建

let cards=[]

并将数据从promise推送到它。然后将卡片传递给这个.setState（{cards}）；但在这之后，承诺将得到履行。setState（{cards}）；所以你把空数组传给了state。哇，非常感谢！它起作用了！现在，我可以阅读代码来理解差异以及我的代码不起作用的原因；）1.在ReactJS中，不要使用Array.prototype.push（）。2.您创建

let cards=[]

并将数据从promise推送到它。然后将卡片传递给这个.setState（{cards}）；但在这之后，承诺将得到履行。setState（{cards}）；所以将空数组传递给state。