useState 返回 172 个对象数组 172 次,而不是返回具有 172 个字段的单个对象

useState returning a 172 object array 172 times instead of the single object with 172 fields

所以我正在使用 React 使用 papaparse 从 CSV 中提取 Covid-19 数据。然后我过滤这个数组只显示今天的结果。我正在使用像这样的功能性反应组件:

import React, { Component, useState, useEffect } from 'react';
import Papa from 'papaparse'
import dataJSON from './data/CovidLocations.json'
import {Tooltip, Circle } from "react-leaflet";

const DashBoard = (props) => {
    const [data, setDataArr] = useState([]);
    const [dailyResults, setDailyResults] = useState([]);


    useEffect(() => {    
        getData()
    }, [dailyResults]); 

    const getData = () => {
        Papa.parse("https://raw.githubusercontent.com/tomwhite/covid-19-uk-data/master/data/covid-19-cases-uk.csv", {
            download: true,
            header: true,
            complete: (results) => {
                var data = results.data
                setDataArr(data)
                setData(data)
            }
        });
    }

    const setData = (data) => {
        let merged = [];
        let result = [];

        for(let i=0; i< data.length; i++) {
            merged.push({
             ...data[i], 
             ...(dataJSON.find((itmInner) => itmInner.Location === data[i].Area))}
            );  
        }

        result = merged.filter(obj => {
            return obj.Date === "2020-04-02"
        });

        let output = result.filter(obj => Object.keys(obj).includes("Latitude"));

        setDailyResults(output)
        console.log(dailyResults)

    }


        return(
            <div>
            {dailyResults &&
            dailyResults.map(({Location, Latitude, Longitude, TotalCases}, i) => (
            <Circle
                key={`markers-${i}`}
                center={[Latitude, Longitude]}
                radius={35 * TotalCases}
                fillColor="red"
                color="black"
                weight="0.5"
            >
                <Tooltip>
                <span>
                    <b>Location</b>: {Location}
                    <br />
                    <b>Total Cases</b>: {TotalCases}
                </span>
                </Tooltip>
            </Circle>
            ))}
            </div>
        )

}

export default DashBoard;

在此处的第 46 行 console.log(dailyResults) 它 return 对象正确地映射到另一个 json 对象,但是它随后遍历该对象 172 次(与数组值)。我需要的是要执行的代码,从 CSV 映射数组,添加 latlngs(所有这些都工作正常)但是然后在 return 语句中我需要 172 的数组不继续循环所以它可以通过进入 react-leaflet 作为创建地图标记的对象。这似乎是一个简单的问题,我只是不知道如何实现它。

dataJSON 格式:

  {
    "Location": "Barking and Dagenham",
    "Latitude": 53.546299,
    "Longitude": -1.46786
  }

dailyResults 正在多次更改,因为您正在循环处理大量数据,因此您可能也在请求多次 csv 数据,那么您可能应该进行无限循环,并且您的浏览器堆栈也会随着您的更改而变化output 变量的次数与循环 data 变量的次数一样多。

所以我知道你想要实现的是从 dataJSON 中提取 LocationLatitude 和经度,并从 csv 中提取 TotalCasesAreaLocation 进行比较。如果是这种情况,您可以通过简单的方式进行操作:

从 csv 解析数据后,循环遍历 dataJSONdata,像这样使用常量变量推送包含上述数据的对象:

  let dailyResults = [];

  data.find((csv) => {
    dataJSON.forEach((json) => {
      if (csv.Area === json.Location) {
        dailyResults.push({
          Location: json.Location,
          Latitude: json.Latitude,
          Longitude: json.Longitude,
          TotalCases: csv.TotalCases,
        });
      }
    });
  });

并从依赖项数组中删除 dailyResults

 useEffect(() => {
    getData();
  }, []);

Demo