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数组不保持循环，因此可以将其传递到{{1 }}作为创建地图标记的对象。看来这是一个简单的问题，我只是不知道如何实现。

dataJSON格式：

react-leaflet

Answer 1

dailyResults正在多次更改，因为您正在循环处理大量数据，因此可能您还请求了csv数据的倍数，那么在更改时{{{ 1}}变量与您遍历output变量的次数相同。

所以我了解您想要实现的是从data中提取Location，Latitude和经度，并通过比较{ {1}}与dataJSON。如果是这种情况，您可以通过一种简单的方式做到这一点：

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

Location

并从依赖项数组中删除dataJSON：

data

Demo

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

1 个答案: