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>
  );