React-simple-map“意外令牌<在位置0的JSON中”

Question

我想在react中为我的项目使用react-simple-map。

我在github上使用了这个例子来尝试显示一个简单的地图：

import React, { Component } from "react"
import {
  ComposableMap,
  ZoomableGroup,
  Geographies,
  Geography,
} from "react-simple-maps"

const wrapperStyles = {
  width: "100%",
  maxWidth: 980,
  margin: "0 auto",
}

class BasicMap extends Component {
  render() {
    return (
      <div style={wrapperStyles}>
        <ComposableMap
          projectionConfig={{
            scale: 205,
            rotation: [-11,0,0],
          }}
          width={980}
          height={551}
          style={{
            width: "100%",
            height: "auto",
          }}
          >
          <ZoomableGroup center={[0,20]} disablePanning>
            <Geographies geography="/static/world-50m.json">
              {(geographies, projection) => geographies.map((geography, i) => geography.id !== "ATA" && (
                <Geography
                  key={i}
                  geography={geography}
                  projection={projection}
                  style={{
                    default: {
                      fill: "#ECEFF1",
                      stroke: "#607D8B",
                      strokeWidth: 0.75,
                      outline: "none",
                    },
                    hover: {
                      fill: "#607D8B",
                      stroke: "#607D8B",
                      strokeWidth: 0.75,
                      outline: "none",
                    },
                    pressed: {
                      fill: "#FF5722",
                      stroke: "#607D8B",
                      strokeWidth: 0.75,
                      outline: "none",
                    },
                  }}
                />
              ))}
            </Geographies>
          </ZoomableGroup>
        </ComposableMap>
      </div>
    )
  }
}

export default BasicMap

但是，我在控制台中看到错误消息“意外令牌< in JSON at position 0”。我保留了完全相同的文件夹。唯一的错误消息是这样的。

如果你对react中的地图有一个想法，我可以根据某些标准用不同的颜色给每个国家上色…

提前谢谢你。

Answer 1

我也面临着同样的问题。如果你把world-50m.json放在src文件夹中，react无法通过get请求加载它-它会尝试从http://localhost:3000/static/world-50m.json加载它。在我的例子中，它返回自定义的404HTML页面->，这就是为什么会出现错误"Unexpected < In JSON at position 0“的原因。

解决方案是将json与map一起移动到react公共文件夹中，然后它开始工作。