javascript - 为什么我的 .json 返回未定义并给出错误“JSON 输入意外结束”？

Question

我正在尝试完成课堂作业，但我无法弄清楚为什么我的 json 没有按预期工作。任务的具体内容是：

使用 React.js 作为基础，制作一个包含这组交互的数据驱动的地图应用程序：

数据

一个 .json 文件，其中至少包含五个与此数据相关的兴趣点：x 和 y 位置、位置名称、位置图片的 url（包含在您的项目中）以及位置描述。

布局

项目应该有两个面板：左侧面板列出了所有位置的名称。右侧应在图像上显示所有位置（作为一组制造商）（它不必是像谷歌地图这样的地图）。是的，这意味着您可以制作幻想地图或其他东西。

最初隐藏的还应该是一系列弹出窗口，这些弹出窗口将在与项目的交互中可见。

相互作用

单击左侧栏上的位置名称时 -> 突出显示地图上的相应标记。单击地图上的标记时 - > 突出显示左侧栏中的位置名称并在地图上方显示一个弹出窗口，显示所有相关信息。

最终点（10 分）：调整数据，使每个位置都有一组标签（即“食物”、“远足”）。创建列出这些标签的第三个组件。单击这些标签之一将“过滤”显示的数据，以便在地图上的列表中只能看到带有这些标签的条目。

现在我认为我拥有一切，但是当我尝试运行它时，我收到错误“未处理的拒绝（SyntaxError）JSON 输入的意外结束”。从我对问题的调查中可以看出，这是将 json 解析为 HTML 的问题，但我不知道为什么会出现这个问题。

我有的：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import List from "./List";
import Points from "./Points";
import Tags from "./Tags";

import "./styles.css";

class App extends Component {
  constructor() {
    super();

    this.state = {
      points: {
        data: [
          {
            id: 0,
            x: 0,
            y: 0,
            name: "name",
            url: "url"
          }
        ]
      },
      selected: "none",
      tag: "none"
    };

    //load in the JSON
    fetch("data/data.json")
      .then(result => result.json())
      .then(data => {
        //sets the json data to this.state.points
        this.setState({ points: data });
      });
  }

  render() {
    console.log(this.state.points.data[this.state.selected]);
    return (
      <div className="App">
        <List
          selected={this.state.selected}
          onSelection={choice => {
            this.changeSelection(choice);
          }}
          pointInfo={this.state.points.data}
        />
        <Points
          onSelection={choice => {
            this.changeSelection(choice);
          }}
          selected={this.state.selected}
          selectionChoice={this.state.points.data[this.state.selected]}
          pointInfo={this.state.points.data}
        />
      </div>
    );
  }

  //changes the selected value in state
  //value of selected is send to Points and List
  changeSelection(num) {
    this.setState({ selected: num });
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

而且我不知道问题是否源于实际的 json 文件，但我的 json 是：

{
  "data": [
    {
      "id": 0,
      "x": 500,
      "y": 500,
      "name": "Pittsburgh",
      "url": "./images/Pittsburgh.jpg",
      "description": "Pittsburgh is a city in western Pennsylvania at the junction of 3 rivers. Its Gilded Age sites, including the Carnegie Museum of Natural History, the Carnegie Museum of Art and the Phipps Conservatory and Botanical Gardens, speak to its history as an early-20th-century industrial capital. In the North Shore neighborhood are the modern Andy Warhol Museum, Heinz Field football stadium and PNC Park baseball stadium.",
      "tag": "historical"
    },
    {
      "id": 1,
      "x": 700,
      "y": 220,
      "name": "Indianapolis",
      "url": "./images/Indianapolis.jpg",
      "description": "Indianapolis is the capital and most populous city of the U.S. state of Indiana and the seat of Marion County. As of 2017, Indianapolis is the third most populous city in the American Midwest and 16th most populous in the U.S., with an estimated population of 863,002.",
      "tag": "governmental"
    },
    {
      "id": 2,
      "x": 450,
      "y": 100,
      "name": "Garland",
      "url": "./images/Garland.jpg",
      "description": "Garland is a city in the U.S. state of Texas. It is a large city located northeast of Dallas and is a part of the Dallas–Fort Worth metroplex. It is located almost entirely within Dallas County, except a small portion located in Collin and Rockwall Counties.",
      "tag": "historical"
    },
    {
      "id": 3,
      "x": 480,
      "y": 240,
      "name": "Tampa",
      "url": "./images/Tampa.jpg",
      "description": "Tampa is a city on Tampa Bay, along Florida’s Gulf Coast. A major business center, it’s also known for its museums and other cultural offerings. Busch Gardens is an African-themed amusement park with thrill rides and animal-viewing areas. The historic Ybor City neighborhood, developed by Cuban and Spanish cigar-factory workers at the turn of the 20th century, is a dining and nightlife destination.",
      "tag": "historical"
    },
    {
      "id": 4,
      "x": 650,
      "y": 100,
      "name": "Sacramento",
      "url": "./images/Sacramento.jpg",
      "description": "Sacramento, capital of the U.S. state of California, lies at the confluence of the Sacramento River and American River. The district of Old Sacramento harkens back to the city’s Gold Rush era, with wooden sidewalks and wagon rides. One of several museums in Old Sacramento, the California State Railroad Museum depicts the construction of the Transcontinental Railroad, one of the country’s earliest technological feats.",
      "tag": "historical"
    }
  ]
}

有什么我只是在这里遗漏的东西，还是我完全错过了我正在尝试做的事情？

标签： javascriptjsonreactjs