Первый объект React Leaflet не определен в случае useState для рисования маркеров карты - PullRequest
Новая
       92

Первый объект React Leaflet не определен в случае useState для рисования маркеров карты

2 голосов
/ 21 марта 2020

Я пытаюсь провести l oop через объект, который был проанализирован из CSV-файла Locations и пар Lat / Lng. Но когда я l oop через этот объект, первый l oop возвращает мой объект со всеми значениями как неопределенными. Мой код выглядит следующим образом: 

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>, возвращается первый результат:

undefined undefined undefined undefined undefined

тогда как второй прогон возвращает правильный объект следующим образом:

0 Barking and Dagenham 53.546299 -1.46786 18

Это заставляет меня создать объект маркера потерпеть неудачу, так как первый объект не является латентной парой, я пытался создать маркеры, например, так: 

<Marker position={(data.longitude, data.latitude)}>
  <Popup>
    <span>
      A pretty CSS3 popup.
      <br />
      Easily customizable.
    </span>
  </Popup>
</Marker>;

Вот где возникает ошибка ^ Любые идеи, где я иду не так, это моя первая реакция Проект любая помощь приветствуется!

CSV формат файла: 

Location,TotalCases,Latitude,Longitude
Barking and Dagenham,18,53.546299,-1.46786
Barnet,28,51.605499,-0.207715

1 Ответ

0 голосов
/ 21 марта 2020

То, что вы пытаетесь, может быть достигнуто гораздо более простым способом.

Разбор CSV-данных внутри useEffectHook. Вам не нужно ничего из этого:

const response = await fetch ('/ data / CovidCasesClean.csv') const reader = response.body.getReader () const result = await reader.read ( ) // необработанный массив const decoder = new TextDecoder ('utf-8') const csv = decoder.decode (result.value) // текст csv 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 l oop поверх них, чтобы визуализировать маркеры: 

{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>
    ))}

Демо

...