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
中提取 Location
、Latitude
和经度,并从 csv 中提取 TotalCases
将 Area
与 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();
}, []);
所以我正在使用 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
中提取 Location
、Latitude
和经度,并从 csv 中提取 TotalCases
将 Area
与 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();
}, []);