create-react-app Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

Question

嘗試使用 React 中的 Highcharts 從 json 動態讀取數據。 認輸並呼吁SO尋求幫助。

不斷獲得：

"Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0"

不管我把文件放在哪里。 從 create-react-app 中退出並更改 Webpack 配置並沒有幫助。

網絡選項卡顯示 200 響應。

JSON 有效。 嘗試從src和public文件夾中讀取 json 。 曾嘗試使用fetch與標頭和不使用。 （使用標題將 200 更改為 404）。

headers: {
  'Accept': 'application/json',
  'Content-Type': 'application/json'
  }
}

console.log(response.headers.get('Content-Type'))

返回text/html; charset=UTF-8 text/html; charset=UTF-8 。

在這里和這里嘗試了解決方案。

這是組件：

圖表.js

import React, { Component } from 'react';
import HighchartsReact from 'highcharts-react-official';
import Highcharts from 'highcharts';

const endpoint = '../public/dummy.json'

export default class Chart extends Component {
  constructor(props) {
    super(props);

    this.state = {
      // To avoid unnecessary update keep all options in the state.
      chartOptions: {
        chart: {
          type: 'bar'
        },
        xAxis: {
          title: {
            text: 'X Axis'
          }
        },
        yAxis: {
          title: {
            text: 'Y Axis'
           },
          min: 0,
          max: 100
        },
        series: [
          { data: [6] }
        ],
        plotOptions: {
          series: {
            point: {
              events: {
                mouseOver: this.setHoverData.bind(this)
              }
            },
            name: 'Chart name'
          }
        }
      },
      hoverData: null
    };
  }

  setHoverData = (e) => {
    console.log(e)
    // The chart is not updated because `chartOptions` has not changed.
    this.setState({ hoverData: e.target.options.x })
  }

  updateSeries = () => {
    // The chart is updated only with new options.
    this.setState({
      chartOptions: {
        series: [
          { data: [Math.random() * 100]}
        ]
      }
    });
  }


    componentDidMount() {
      // fetch(endpoint, {
      //   headers: {
      //     'Accept': 'application/json',
      //     'Content-Type': 'application/json'
      //   }
      // })
      fetch(endpoint)         
      .then((response) => {
        response.json()
        console.log(response.headers.get('Content-Type'))
      })
      .then(data => {
        this.state.chartOptions.series[0].data = data;
        this.setState({ data: data });
      })
      // .catch(error => {
      //   console.log('Error! ', error)
      // })
    }


  render() {
    const { chartOptions, hoverData } = this.state;

    console.log('this.state: ', this.state)

    return (
      <div>
        <HighchartsReact
          highcharts={Highcharts}
          options={chartOptions}
        />
      <h3>Hovering over {hoverData}</h3>
      <button onClick={this.updateSeries.bind(this)}>Update Series</button>
      </div>
    )
  }
}

dummy.json

[
    {
        "first_name": "John",
        "amount": 10
    }, 
    {
        "fist_name": "Tim",
        "amount": 8 
    }
]

索引.js

import ReactDOM from 'react-dom';
import Chart from './Chart'

ReactDOM.render(<Chart />, document.getElementById('root'));

Answer 1

簡答

將 ../public/dummy.json 更改為./dummy.json，因為您相對於公共文件夾的根級別，而不是像 src/ 文件夾一樣位於同級文件夾中。

長說明

使路徑僅為 ./dummy.json，因為只有公共文件夾中的內容才會被提供。 你的反應組件被捆綁到鏈接到你公共文件夾中的 index.html 的 js 文件中。 因此，您的提取請求被捆綁/“編譯”到公共文件夾中的 JS 文件中。 因此，您的相對文件路徑應該假設您位於公用文件夾中。