Javascript 创建react应用程序未捕获(承诺中)语法错误:意外标记<;在JSON中的位置0
尝试使用React中的Highcharts动态读取json中的数据。认输并向SO求助 继续获得:Javascript 创建react应用程序未捕获(承诺中)语法错误:意外标记<;在JSON中的位置0,javascript,json,reactjs,highcharts,Javascript,Json,Reactjs,Highcharts,尝试使用React中的Highcharts动态读取json中的数据。认输并向SO求助 继续获得: "Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0" console.log(response.headers.get('Content-Type')) 返回text/html;字符集=UTF-8 我们已经尝试了解决方案和方法 以下是组件: Chart.js import React, {
"Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0"
console.log(response.headers.get('Content-Type'))
返回text/html;字符集=UTF-8
我们已经尝试了解决方案和方法
以下是组件:
Chart.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>
)
}
}
index.js
import ReactDOM from 'react-dom';
import Chart from './Chart'
ReactDOM.render(<Chart />, document.getElementById('root'));
从“react dom”导入ReactDOM;
从“./Chart”导入图表
ReactDOM.render(,document.getElementById('root'));
简短回答
将../public/dummy.json更改为just/dummy.json,因为您是相对于公用文件夹的根级别的,而不是像src/folder那样位于公用的同级文件夹中
详细解释
将路径设为only./dummy.json,因为只有公用文件夹中的内容才会被提供。react组件被绑定到与公用文件夹中index.html链接的js文件中。因此,获取请求将被捆绑/编译到公用文件夹中的JS文件中。因此,在创建相对文件路径时,应假定您位于公用文件夹内。“将../public/dummy.json更改为just./dummy.json,因为您是相对于公用文件夹的根级别的,而不是像src/folder那样位于公用的同级文件夹内。”成功。这应该是公认的答案。
[
{
"first_name": "John",
"amount": 10
},
{
"fist_name": "Tim",
"amount": 8
}
]
import ReactDOM from 'react-dom';
import Chart from './Chart'
ReactDOM.render(<Chart />, document.getElementById('root'));