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

在第 46 行，console.log(dailyResults) 它正确返回对象，并与其他 json 对象进行映射，但随后它会迭代该对象 172 次(数组值的数量相同) 。我需要的是执行这段代码，从 CSV 映射数组，添加经纬度(所有这些都工作正常)，但然后在返回语句中我需要 172 的数组不保持循环，这样它就可以传递到 React-leaflet 作为创建 map 标记的对象。这似乎是一个简单的问题，我只是不知道如何实现它。

dataJSON 格式:

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

Answer 1

dailyResults 正在更改多次，因为您正在循环处理大量数据，因此您可能还请求多次 csv 数据，那么您可能应该在更改时采取无限循环和浏览器堆栈也可以像循环数据变量一样多次输出变量。

所以我理解您想要实现的是从 dataJSON 中提取 Location、Latitude 和 Longitude，并提取 通过将 Area 与 Location 进行比较，从 csv 中获取 >TotalCases。如果是这种情况，您可以通过简单的方式做到这一点:

解析 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