对象未被识别为 JSON 对象

Question

简短的故事：我正在制作自己的 GIS（地理信息系统），并希望能够上传带有地理数据的 JSON 文件。但是，我不想将文件保存在数据库中，而只是保存在列表中。此外，我使用 Context 将数据解析到 <MAP/> (leaflet) 组件。

我的问题是，当将 JSON 推送到列表时，它不会被识别为 JSON，而是字符串。我该如何解决这个问题。

我对反应很陌生，所以我愿意接受建议以不同的方式解决它。

这是我的代码

import React, {createContext, useState} from 'react';
import "../../App.css";
import data from '../../Layers/layer1.json'
import data1 from '../../Layers/layer2.json'


export const FileContext = createContext()

const layerList = []

function updateList(layer){
    layerList.push(layer)
}


export const FileProvider = (props) => {
    
    const [layer, setLayer] = useState(
        layerList
    )

    return(
        <FileContext.Provider value = {[layer, setLayer]}>
            {props.children}
        </FileContext.Provider>
    );
}

    // Create an object of formData 
const onFileChange = e => {
    const fileReader = new FileReader();
    fileReader.readAsText(e.target.files[0], "UTF-8");
    fileReader.onload = e => {
        console.log(e.target.result);
        updateList(e.target.result);
        console.log(layerList)
    };
    //console.log(layerList)
    }


function FileUpload() {

  return (
    <div>
        <div id='fileupload'>
            <input type="file" onChange={onFileChange} />
        </div>
    </div>


  );
}

export default FileUpload;

这是地图组件

import { Map, TileLayer, GeoJSON} from 'react-leaflet'
import "../App.css";
import data from '../Layers/layer1.json'
import { FileContext } from '../LandingPage/ToolbarComponents/FileUpload';



function MapOslo() {

  const [layer, setLayer] = useContext(FileContext)

  return (
      <Map center={[59.93, 10.75]} zoom={4}>
          <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          />
          <GeoJSON data={layer} style={['color','#006400']} />
      </Map>
  );
}

export default MapOslo;

Answer 1

要将字符串转换为 JSON，您可以使用 JSON.parse(str)

var jsonStr = "{test: 'hi'}";
var json = JSON.parse(jsonStr);

所以我认为你必须在这里实现parse：updateList(JSON.parse(e.target.result));