useState возвращает 172 массива объектов 172 раза вместо одного объекта с 172 полями - PullRequest
Новая
       65

useState возвращает 172 массива объектов 172 раза вместо одного объекта с 172 полями

0 голосов
/ 03 апреля 2020

Итак, я использую React для извлечения данных Covid-19 из CSV с использованием papaparse. Затем я отфильтрую этот массив, чтобы показать только результаты с сегодняшнего дня. Я использую функциональный компонент реакции следующим образом: 

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, добавлял latlngs (все работает нормально), но затем в операторе return мне нужен массив 172, чтобы не продолжать цикл, чтобы он мог быть передан в react-leaflet как объект для создания маркеров карты. Вроде простая проблема, я просто не знаю, как это реализовать.

данные JSON формат: 

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

1 Ответ

1 голос
/ 03 апреля 2020

dailyResults меняется многократно, потому что вы перебираете много данных, поэтому, вероятно, вы запрашиваете также кратные csv данные, тогда вам, вероятно, потребуется бесконечный l oop и ваш стек браузера при изменении также * Переменная 1002 * столько раз, сколько вы перебираете переменную data.

Итак, насколько я понимаю, вы хотите добиться, чтобы извлечь Location, Latitude и Longitude из dataJSON, а также извлечь TotalCases из CSV, сравнив Area с Location. Если это так, вы можете сделать это простым способом:

После анализа данных из CSV, l oop over dataJSON и data, например, используя постоянную переменную для pu sh объект с вышеупомянутыми данными, которые вы хотите включить: 

  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();
  }, []);

Демо

...