Sql 无法在React.js上显示API数据

我试图在React.js前端显示来自本地API的数据

它显示的是一个空白表格，只有表格标题，但表格上没有条目。JSON来自API，就像I console.log（this.state.cards）一样，它将数组记录在命令行上

感谢您的帮助

谢谢大家!

import React, { Component } from 'react';
import '../css/card.css';
import Card from './Card';
import CardTable from './CardTable.js';
import request from 'request';

class TopCards extends Component {

    constructor() {
        super();
        this.state = {
          cards: [],
        };
      }

    componentDidMount() {
        const url = "http://localhost:1200";
        request({
            url: url,
            json: true
        }, (error, response, body) => {
            if (!error && response.statusCode === 200) {
                for (let i in body) {
                    this.state.cards.push(body[i]);
                }
            }
        })
    }

    render() {


        if(this.state.cards) {
            var cardList = this.state.cards.map(function(card){
                return(
                    <CardTable key={card.cardName} card={card} />
                );
            });
        }

        return (
            <div className="TopCards">
                <h1>Top Cards This Week:</h1>
                <br />
                <table width="400">
                <tr>
                        <th>Name</th>
                        <th>Count</th>
                        <th>Wins</th>
                        <th>Losses</th>
                        <th>Win %</th>
                </tr>
                    {cardList}
                </table>
            </div>
        )
    }
}

export default TopCards;

import React，{Component}来自'React'；
导入“../css/card.css”；
从“./卡”导入卡；
从“./CardTable.js”导入CardTable；
从“请求”导入请求；
类TopCards扩展组件{
构造函数（）{
超级（）；
此.state={
卡片：[]，
};
}
componentDidMount（）{
常量url=”http://localhost:1200";
请求({
url:url，
json:true
}，（错误、响应、正文）=>{
如果（！error&&response.statusCode==200）{
为了（让我进入身体）{
this.state.cards.push（body[i]）；
}
}
})
}
render（）{
如果（本.州.卡）{
var cardList=this.state.cards.map（函数（卡片）{
返回(
);
});
}
返回(
本周头牌：


名称
计数
获胜
损失
赢%
{cardList}
)
}
}
导出默认的topcard；

您需要

设置状态

来通知React您想要呈现某些内容的事实。其次，您应该确保使用不可变的数据结构<代码>推送或

取消移动

不通知任何更改

for (let i in body) {
    this.setState({
        cards: [
            ...this.state.cards,
            body[i]
        ]
    });
}

---

谢谢你的回复！我已将for（让我进入身体）更改为setState，就像您所做的那样。表中仍然没有数据。此外，console.log不再传递JSON数组。还有其他建议吗？