Reactjs，如何构造一个特定的json来增加每月之间的金额

Question

我从我的API中获取了以下数据：dataN[{...}, {...}, {...}, {...}, {...}]有关每个内部的更多详细信息：{...}{ date: "2018-01-01" import: 1},{ date: "2018-03-03" import: "10"},{ date: "2018-03-20" import: 10},{ date: "2020-05-01" import: 10},{ date: "2020-05-02" import: 10},{ date: "2020-05-03" import: 10},我有一个函数工作，它提取所有发现的月份和年份，结果如下：阵列： [“2018-01”， “2018-03”， “2020-05”， .....]使用此数组，我有另一个函数（工作），它在日期之间查找，并给我多少次操作是在给定日期之前完成的。示例：在年份和月份：2018-01，我只有1次操作，结果将是：{ date: "2018-01-01" import: 1},例如：“2020-05”我有3个操作，因此结果将是：{日期：“2020-05-01”导入：10},{ date: "2020-05-02" import: 10},{ date: "2020-05-03" import: 10},现在我已经每个月执行一次操作并按年排序，我想添加该月执行的金额。我的目标是每个月和每个年添加所有金额（它始终是一个数字）（每个月都有一个总金额）示例：“2018-01”进口“2018-03”进口日期2020-03-03 +进口日期2020-03-20“2018-05”进口日期2020-05-01 +进口日期2020-05-01 +进口日期：“2020-05-03最终的 json：{date : "2018-01"import : 1},{date : "2018-03"import : 20},{date : "2018-05"import : 30}我有这个代码，但我真的不知道根据需要获取：我真的会接受任何帮助。//["2018-01", "2018-02", "2018-03", "2018-04", "2018-05", .....]        var Total = 0;        array.forEach(function(item){            //console.log(item)            var a = moment(item);            var start = a.format('YYYY-MM-DD')            var b = a.add(30, 'days');            var end = b.format('YYYY-MM-DD')            console.log("procesing search between date : ",start , " and last date: ", end)            DataFromApi.forEach((value, key) => {                var EntreFechas = moment(value.compra_fecha_oper).isBetween(String(start), String(end) ); // true                if ( EntreFechas === true && value.estado == "Finalizado" && value.moneda_crypto == TipoCrypto ){                    console.log(key, " Value Date: ",value.compra_fecha_oper ,"Has result: ",  EntreFechas)                    if (value.estado == "Finalizado" && value.moneda_crypto == TipoCrypto){                        var jsonObjFinalizadas =                         {                         "fecha": value.compra_fecha_oper,                        "importe":Total += parseFloat(value.compra_en_fiat),                        }

Answer 1

我已经完成了一个要求，如下所示。请尝试此示例并实现其他示例。

import React, {Component} from "react";

export default class JsonExample extends Component {

    state = {

        updatedJson: []

    };

    json = [

        {date: "2018-01-01", import: "XXX <--number"},

        {date: "2018-03-03", import: "XXX<--number"},

        {date: "2018-03-20", import: "XXX<--number"},

        {date: "2018-03-25", import: "XXX<--number"},

        {date: "2020-05-01", import: "XXX<--number"},

        {date: "2020-05-02", import: "XXX<--number"},

        {date: "2020-05-03", import: "XXX<--number"},

    ];

    componentDidMount() {

        let updatedJson = [];

        this.json.map(value => {

            let d = new Date(value.date);

            let yearMonth = ("0" + (d.getMonth() + 1)).slice(-2) + "-" + d.getFullYear();

            updatedJson.push(yearMonth);

        });

        this.setState({updatedJson: updatedJson});

    }

    render() {

        return (

            <div>

                {JSON.stringify(this.state.updatedJson)}

            </div>

        );

    }

}

根据要求更新了完整代码

import React, {Component} from "react";

export default class JsonExample extends Component {

    state = {

        monthlyData: [],

        sortedData: [],

        monthlyTotalImport: []

    };

    json = [

        {date: "2018-01-01", import: 7},

        {date: "2018-01-21", import: 1},

        {date: "2018-03-03", import: 10},

        {date: "2018-03-20", import: 10},

        {date: "2020-05-01", import: 10},

        {date: "2017-12-01", import: 5},

        {date: "2020-05-02", import: 10},

        {date: "2020-05-03", import: 10},

    ];

    componentDidMount() {

        let data = [];

        this.json.map(value => {

            let d = new Date(value.date);

            data.push({...value, date2: d});

        });

        let sortedData = data.sort((a, b) => a.date2 - b.date2);

        console.log(sortedData, 'sorted');

        let monthlyData = [];

        sortedData.map(value => {

            let d = new Date(value.date);

            let yearMonth = ("0" + (d.getMonth() + 1)).slice(-2) + "-" + d.getFullYear();

            monthlyData.push({...value, yearMonth: yearMonth});

        });

        console.log(monthlyData, 'monthly data');

        let result = monthlyData.reduce((acc, item) => ({

            ...acc,

            [item.yearMonth]: (acc[item.yearMonth] || 0) + item.import

        }), {});

        this.setState({monthlyTotalImport: result});

        console.log(result, 'result');

    }

    render() {

        return (

            <div>

                {JSON.stringify(this.state.monthlyTotalImport)}

            </div>

        );

    }

}