React Leaflet 第一个对象在用于绘制地图标记的 useState 案例中未定义
React Leaflet first object is undefined in a useState case for drawing map markers
我正在尝试遍历从位置和 Lat/Lng 对的 CSV 文件解析的对象。但是当我循环遍历这个对象时,第一个循环 returns 我的对象的所有值都是未定义的。我的代码如下:
import React, { Component, useState, useEffect } from 'react';
import { LatLng } from 'leaflet';
import { Map, TileLayer, CircleMarker, Popup, Marker } from 'react-leaflet';
import CovidCasesClean from './CovidCasesClean.csv';
import Papa from 'papaparse';
export default function PlaceMarker() {
const latlng = [null];
const [rows, setRows] = React.useState([])
const [data, setData] = React.useState({});
React.useEffect(() => {
async function getData() {
const response = await fetch('/data/CovidCasesClean.csv')
const reader = response.body.getReader()
const result = await reader.read() // raw array
const decoder = new TextDecoder('utf-8')
const csv = decoder.decode(result.value) // the csv text
console.log(csv)
const results = Papa.parse(csv, { header: true, skipEmptyLines: true}) // object with { data, errors, meta }
console.log(results)
const rows = results.data
console.log(rows)
// array of objects
setRows(rows)
rows.map((item, i) => {
const rowObj = {item}
//console.log(rowObj)
console.log(i)
setData({
...data, key: i, ...data, location: rowObj.item.Location, ...data, latitude: parseFloat(rowObj.item.Latitude), ...data, longitude: parseFloat(rowObj.item.Longitude), ...data, cases: parseFloat(rowObj.item.TotalCases)
})
})
}
getData()
}, []) // [] means just do this once, after initial render
return (
<div>{console.log(data.key, data.location, data.latitude, data.longitude, data.cases)}</div>
)
}
当控制台行:<div>{console.log(data.key, data.location, data.latitude, data.longitude, data.cases)}</div>
为运行时,第一个结果returns:
undefined undefined undefined undefined undefined
而第二个 运行 到 returns 正确的对象是这样的:
0 Barking and Dagenham 53.546299 -1.46786 18
这导致我创建标记对象失败,因为第一个对象不是 latlng 对,我一直在尝试像这样创建标记:
<Marker position={(data.longitude, data.latitude)}>
<Popup>
<span>
A pretty CSS3 popup.
<br />
Easily customizable.
</span>
</Popup>
</Marker>;
这是错误发生的地方^
任何我出错的想法,这是我的第一个 React 项目,感谢任何帮助!
CSV 文件格式:
Location,TotalCases,Latitude,Longitude
Barking and Dagenham,18,53.546299,-1.46786
Barnet,28,51.605499,-0.207715
您正在尝试的可以通过更简单的方式实现。
解析 useEffectHook 中的 csv 数据。这些你都不需要:
const response = await fetch('/data/CovidCasesClean.csv')
const reader = response.body.getReader()
const result = await reader.read() // raw array
const decoder = new TextDecoder('utf-8')
const csv = decoder.decode(result.value) // the csv text
console.log(csv)
const [data, setData] = useState([]);
useEffect(() => {
Papa.parse(csv, {
download: true, // use this option to interpret the input string as a URL from which to download the input file.
header: true,
skipEmptyLines: true,
complete: results => setData(results.data)
});
}, []);
一旦你存储了 csv 解析的标记数据循环遍历它们以可视化标记:
{data &&
data.map(({ Location, Latitude, Longitude, TotalCases }, i) => (
<Marker
key={`markers-${i}`}
position={[Latitude, Longitude]}
icon={icon}
>
<Popup>
<span>
<b>Location</b>: {Location}
<br />
<b>TotalCases</b>: {TotalCases}
</span>
</Popup>
</Marker>
))}
我正在尝试遍历从位置和 Lat/Lng 对的 CSV 文件解析的对象。但是当我循环遍历这个对象时,第一个循环 returns 我的对象的所有值都是未定义的。我的代码如下:
import React, { Component, useState, useEffect } from 'react';
import { LatLng } from 'leaflet';
import { Map, TileLayer, CircleMarker, Popup, Marker } from 'react-leaflet';
import CovidCasesClean from './CovidCasesClean.csv';
import Papa from 'papaparse';
export default function PlaceMarker() {
const latlng = [null];
const [rows, setRows] = React.useState([])
const [data, setData] = React.useState({});
React.useEffect(() => {
async function getData() {
const response = await fetch('/data/CovidCasesClean.csv')
const reader = response.body.getReader()
const result = await reader.read() // raw array
const decoder = new TextDecoder('utf-8')
const csv = decoder.decode(result.value) // the csv text
console.log(csv)
const results = Papa.parse(csv, { header: true, skipEmptyLines: true}) // object with { data, errors, meta }
console.log(results)
const rows = results.data
console.log(rows)
// array of objects
setRows(rows)
rows.map((item, i) => {
const rowObj = {item}
//console.log(rowObj)
console.log(i)
setData({
...data, key: i, ...data, location: rowObj.item.Location, ...data, latitude: parseFloat(rowObj.item.Latitude), ...data, longitude: parseFloat(rowObj.item.Longitude), ...data, cases: parseFloat(rowObj.item.TotalCases)
})
})
}
getData()
}, []) // [] means just do this once, after initial render
return (
<div>{console.log(data.key, data.location, data.latitude, data.longitude, data.cases)}</div>
)
}
当控制台行:<div>{console.log(data.key, data.location, data.latitude, data.longitude, data.cases)}</div>
为运行时,第一个结果returns:
undefined undefined undefined undefined undefined
而第二个 运行 到 returns 正确的对象是这样的:
0 Barking and Dagenham 53.546299 -1.46786 18
这导致我创建标记对象失败,因为第一个对象不是 latlng 对,我一直在尝试像这样创建标记:
<Marker position={(data.longitude, data.latitude)}>
<Popup>
<span>
A pretty CSS3 popup.
<br />
Easily customizable.
</span>
</Popup>
</Marker>;
这是错误发生的地方^ 任何我出错的想法,这是我的第一个 React 项目,感谢任何帮助!
CSV 文件格式:
Location,TotalCases,Latitude,Longitude
Barking and Dagenham,18,53.546299,-1.46786
Barnet,28,51.605499,-0.207715
您正在尝试的可以通过更简单的方式实现。
解析 useEffectHook 中的 csv 数据。这些你都不需要:
const response = await fetch('/data/CovidCasesClean.csv') const reader = response.body.getReader() const result = await reader.read() // raw array const decoder = new TextDecoder('utf-8') const csv = decoder.decode(result.value) // the csv text console.log(csv)
const [data, setData] = useState([]);
useEffect(() => {
Papa.parse(csv, {
download: true, // use this option to interpret the input string as a URL from which to download the input file.
header: true,
skipEmptyLines: true,
complete: results => setData(results.data)
});
}, []);
一旦你存储了 csv 解析的标记数据循环遍历它们以可视化标记:
{data &&
data.map(({ Location, Latitude, Longitude, TotalCases }, i) => (
<Marker
key={`markers-${i}`}
position={[Latitude, Longitude]}
icon={icon}
>
<Popup>
<span>
<b>Location</b>: {Location}
<br />
<b>TotalCases</b>: {TotalCases}
</span>
</Popup>
</Marker>
))}