javascript - 如何在 React 中更新数组中对象属性的状态？

Question

我正在使用图表库来呈现比特币价格图表。

所以我想出了如何更新嵌套对象的状态，这就是我如何使用从 API 获取的“日期”数组更新“类别”的状态。

但是我尝试了很多，但无法弄清楚如何使用从 API 获取的“价格”数组更新“系列”数组中“数据”的状态。

那么，究竟如何更新数组中对象的状态？或者我如何将“价格”数组传递给“数据”对象？

代码 ：

import React from "react";

import ReactApexChart from "react-apexcharts";

class Charts extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            series: [
                {
                    name: "series1",
                    data: [],
                },
            ],

            options: {
                chart: {
                    height: 350,
                    type: "area",
                },
                dataLabels: {
                    enabled: false,
                },
                stroke: {
                    curve: "smooth",
                },
                xaxis: {
                    type: "date",
                    categories: [],
                },
                tooltip: {
                    x: {
                        format: "dd/MM/yy HH:mm",
                    },
                },
            },
        };
    }
    async componentDidMount() {
        const url = "https://api.coindesk.com/v1/bpi/historical/close.json";
        const res = await fetch(url);
        const data = await res.json();
        // console.log(data.bpi);
        let date = [];
        let i = 0,
            j = 0;
        for (let key in data.bpi) {
            if (i >= 23) {
                date[j] = key;
                ++j;
            }
            ++i;
        }
        console.log(date);
        this.setState((prevState) => ({
            ...prevState,
            options: {
                ...prevState.options,
                xaxis: {
                    ...prevState.options.xaxis,
                    categories: date,
                },
            },
        }));

        let price = Object.values(data.bpi);
        console.log(price);
    }

    render() {
        return (
            <div id="chart">
                <ReactApexChart
                    options={this.state.options}
                    series={this.state.series}
                    type="area"
                    height={350}
                />
            </div>
        );
    }
}

export default Charts;

标签： javascriptreactjsstate