React：数据转换为高级形式（或如何在 React chartjs 2 的图表中处理我的数据）

Question

我在数据库中有三个记录 (JSON)，我在 main.js 中获取它们，在返回语句中，我通过<StatisticListGraph items={loadedStatistics} />将它们发送到下一个文件。 在 StatisticListGraph 中，我正在映射数据（您可以在下面看到）。 我在那里以这种形式获得数据：

所以我有三个 JSONs 文件，我的图形被渲染了三次，但我只想渲染一次图形并且数据具有所需的形式： data: [2,5,6,8,7] - >这里应该是我的道具来自数据库的属性，不仅是相同的虚拟数字。

问题：我怎样才能得到图表的正确数据形式 react chartjs 2 - 所以表格数据：[props0.goals, props1.goals, props2.goals, ...]？

如何将数据从三个 JSON 转换为一个 JSON？ 例如我有：

JSON A:{
id: 58987,
name: JsonA,
goals: 5,
assist:4
},
JSON B:{
name: JsonB,
goals: 15,
assist:2
},

JSON C:{
name: JsonC,
goals: 10,
assist:21
}

我想要一个 JSON，我想要这个表格：

JSON Z: {
name: [JsonA, JsonB, JsonC],
goals:  [5,15,10],
assist: [4,2,21]
}

主程序

    const [loadedStatistics, setLoadedStatistics] = useState();


    useEffect(() => {
        const fetchStatistics = async () => {
            try {
                const responseData = await sendRequest(
                    'http://localhost:5000/api/statistics'
                );
                setLoadedStatistics(responseData.statistics);
            } catch (err) { }
        };
        fetchStatistics();
    }, [sendRequest]);

StatisticsListGraph.js

    return (
        <div>
            {props.items.map(
                filteredStatistic => (
                        <StatisticItemGraph
                            key={filteredStatistic.id}
                            id={filteredStatistic.id}
                            name={filteredStatistic.name}
                            goals={filteredStatistic.goals}
                            shots={filteredStatistic.shots}
                            shotsOnGoal={filteredStatistic.shotsOnGoal}
                            ballPos={filteredStatistic.ballPos}
                            tackles={filteredStatistic.tackles}
                            fouls={filteredStatistic.fouls}
                            yellowCards={filteredStatistic.yellowCards}
                            redCards={filteredStatistic.redCards}
                            offsides={filteredStatistic.offsides}
                            cornersKicks={filteredStatistic.cornersKicks}
                            freeKicks={filteredStatistic.freeKicks}
                        />
                ))}
        </div>
    );

StatisticItemGraph.js

import React, { useState, useEffect } from 'react';
import { Doughnut } from 'react-chartjs-2';


const StatisticItemGraph = props => {  
    const [data, setData] = useState([])

    useEffect(() => {   
        setData({
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
          datasets: [{
            label: ['# of Votes'],
            data: [2,5,6,8,7],  **// data: [props.goals] = 3 graphs**
            backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 3
          }]
        })
    
      }, [setData]);

    return (
            <div>
                <Doughnut data={data} />
            </div>
        );
}

export default StatisticItemGraph;

Answer 1

创建一个方法，它将以所需格式返回数据。 我已经编写了将您的数据转换为所需格式的逻辑。

 const data = [{ id: 58987, name: 'JsonA', goals: 5, assist: 4 }, { name: 'JsonB', goals: 15, assist: 2 }, { name: 'JsonC', goals: 10, assist: 21 }] const result = {} data.forEach(item => { if (.result.name) { result.name = [] } else { result.name.push(item.name) } if (.result.goals) { result.goals = [] } else { result.goals.push(item.goals) } if (.result.assist) { result.assist = [] } else { result.assist.push(item.assist) } }) console.log(result)

现在在 StatisticsListGraph 组件中使用此数据并将其传递给子组件。

return ( < div >
    <
    StatisticItemGraph name = {
      result.name
    }
    goals = {
      result.goals
    }
    /> <
    /div>
  );