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

Question

因此，我正在使用React使用papaparse从CSV中提取Covid-19数据。然后，我过滤此数组以仅显示今天的结果。我正在使用功能性的React组件，例如：

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;

在此处console.log(dailyResults)的第46行，它正确返回了该对象，并与另一个json对象映射，但是它随后遍历了该对象172次（相同数目的数组值）。我需要的是执行此代码，从CSV映射数组，添加latlngs（所有方法都可以正常工作），但是然后在return语句中，我需要172的数组不保持循环，因此可以将其传递到react-leaflet作为创建地图标记的对象。看来这是一个简单的问题，我只是不知道如何实现。

dataJSON格式：

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

Answer 1

dailyResults正在多次更改，因为您正在循环处理大量数据，因此可能您也在请求csv数据的倍数，那么您可能应该进行无限循环，并且在更改output变量时浏览器堆栈也应为在循环遍历data变量时会出现很多次。

因此，我了解您想要实现的是从Location中提取Latitude，dataJSON和经度，并通过将TotalCases与Area进行比较从csv中提取Location。如果是这种情况，您可以通过一种简单的方法来完成：

从csv解析数据后，使用常量变量像这样在dataJSON和data上循环，以将要包含的上述数据推入对象：

  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