如何从JSON中获取数据 ReactJs

Question

我有一个JSON数据是这样的。我的JSON数据

这是我的代码。

class WorldLineChart extends Component{
    constructor(props) {
        super(props);
    
        this.state = {
          data: []
        };
      }
    componentDidMount(){
        axios.get(`https://td.fpt.ai/corona/corona-total.json`)
        .then(res => {
            const data = res.data;
            console.log(data);
            this.setState({data: data});
        });
    }

    render(){

        const data = this.state
       
        return(
            <div>
               
            </div>
        )
    }

}

这是我运行上述代码后得到的结果：结果

我想知道如何才能得到所有的键和每个值(这是一个数组)使用ReactJs绘制一个线图。

这是我的linechart的代码。

const lineChart = (
        data
        ? (
            <Line
                data = {{
                    labels: //what i have to put in here,
                    datasets: [{
                        data: //what i have to put in here,
                        label: 'Infected',
                        borderColor: '#3333ff',
                        fill: true
                    }, {
                        data: //what i have to put in here,
                        label: 'Recovered',
                        borderColor: 'green',
                        backgroundColor: 'rgba(255,0,0,0.5)',
                        fill: true
                    },{
                        data: //what i have to put in here,
                        label: 'Deaths',
                        borderColor: 'red',
                        backgroundColor: 'rgba(0, 255, 0, 0.5)',
                        fill: true
                    }],
                }}
            /> ): null
    );

非常感谢！

Answer 1

您的数据可以通过以下方式访问 this.state.data，你需要重构

const data = this.state

到

const {data} = this.state

这就等于说

const data = this.state.data

Answer 2

{
Array.isArray(data) ?
data.map((data,index) => <div key={index}>{data.bind your data}</div>) :  error
}

我想这应该有帮助。