Question

我正在尝试完成课堂作业，但无法弄清楚为什么我的json无法正常工作。分配的细节是：

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

数据

具有至少五个兴趣点的.json文件与此   数据：x和y位置，位置名称，图片的网址   位置（包含在您的项目中）以及   位置。

布局

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

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

互动

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

终点（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"
    }
  ]
}

这里是否有我想念的东西，或者我完全想念要做的事情？

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

0 个答案: