"SyntaxError: Unexpected token <在 JSON 中的位置 0"
在处理类似 Facebook 的内容提要的 React 应用程序组件中，我遇到了一个错误:
<块引用>Feed.js:94 undefined "parsererror" "SyntaxError: Unexpected token < in JSON at position 0
我遇到了类似的错误，结果证明是渲染函数中的 HTML 中的拼写错误，但这里的情况似乎并非如此.
更令人困惑的是，我将代码回滚到更早的已知工作版本，但我仍然收到错误消息.
Feed.js:
从'react'导入反应；var ThreadForm = React.createClass({获取初始状态:函数(){返回{作者:''，文本: ''，包括: ''，受害者: ''}},handleAuthorChange: 函数 (e) {this.setState({作者:e.target.value})},handleTextChange: 函数 (e) {this.setState({text: e.target.value})},handleIncludedChange: 函数 (e) {this.setState({included: e.target.value})},handleVictimChange: 函数 (e) {this.setState({victim: e.target.value})},处理提交:函数(e){e.preventDefault()var author = this.state.author.trim()var text = this.state.text.trim()var 包含 = this.state.included.trim()var 受害者 = this.state.victim.trim()if (!text || !author || !included || !victim) {返回}this.props.onThreadSubmit({作者:作者，文字:文字，包括:包括，受害者:受害者})this.setState({作者: '',文本: ''，包括: ''，受害者: ''})},渲染:函数(){返回 (<form className="threadForm" onSubmit={this.handleSubmit}><输入类型=文本"placeholder="你的名字"价值={this.state.author}onChange={this.handleAuthorChange}/><输入类型=文本"placeholder="说点什么..."值={this.state.text}onChange={this.handleTextChange}/><输入类型=文本"placeholder="命名你的受害者"价值={this.state.victim}onChange={this.handleVictimChange}/><输入类型=文本"placeholder="谁能看到?"价值={this.state.included}onChange={this.handleIncludedChange}/><输入类型=提交"值=发布"/></表格>)}})var ThreadsBox = React.createClass({loadThreadsFromServer:函数(){$.ajax({网址:this.props.url，数据类型:'json'，缓存:假，成功:函数(数据){this.setState({数据:数据})}.bind(这个),错误:函数(xhr，状态，错误){console.error(this.props.url, status, err.toString())}.bind(这个)})},处理线程提交:函数(线程){var 线程 = this.state.datavar newThreads = threads.concat([thread])this.setState({data: newThreads})$.ajax({网址:this.props.url，数据类型:'json'，类型:'POST'，数据:线程，成功:函数(数据){this.setState({数据:数据})}.bind(这个),错误:函数(xhr，状态，错误){this.setState({数据:线程})console.error(this.props.url, status, err.toString())}.bind(这个)})},获取初始状态:函数(){返回{数据:[]}},组件DidMount:函数(){this.loadThreadsFromServer()setInterval(this.loadThreadsFromServer, this.props.pollInterval)},渲染:函数(){返回 (<div className="threadsBox"><h1>饲料</h1><ThreadForm onThreadSubmit={this.handleThreadSubmit}/></div></div>)}})module.exports = ThreadsBox在 Chrome 开发者工具中，错误似乎来自这个函数:
loadThreadsFromServer: 函数 loadThreadsFromServer() {$.ajax({网址:this.props.url，数据类型:'json'，缓存:假，成功:函数(数据){this.setState({ 数据:数据 });}.bind(这个),错误:函数(xhr，状态，错误){console.error(this.props.url, status, err.toString());}.bind(这个)});},console.error(this.props.url, status, err.toString() 下划线.
由于看起来错误似乎与从服务器提取 JSON 数据有关，我尝试从空白数据库开始，但错误仍然存在.该错误似乎是在无限循环中调用的，大概是因为 React 不断尝试连接到服务器并最终导致浏览器崩溃.
我使用 Chrome 开发工具和 Chrome REST 客户端检查了服务器响应，数据似乎是正确的 JSON.
编辑 2:
看起来虽然预期的 API 端点确实返回了正确的 JSON 数据和格式，但 React 正在轮询 http://localhost:3000/?_=1463499798727 而不是预期的 http://localhost:3001/api/threads.
我正在端口 3000 上运行 webpack 热重载服务器，并在端口 3001 上运行 express 应用程序以返回后端数据.令人沮丧的是，我上次处理它时它工作正常，但找不到我可能改变的东西来破坏它.
解决方案我遇到了这个错误SyntaxError: Unexpected token m in JSON at position"，其中的 token 'm' 可以是任何其他字符.
原来我在使用 RESTconsole 进行 DB 测试时遗漏了 JSON 对象中的双引号之一，为 {"name: "math"}，正确的应该是 {"name": "math"}
我费了好大劲才弄明白这个笨拙的错误.恐怕其他人也会遇到类似的问题.
In a React app component which handles Facebook-like content feeds, I am running into an error:
Feed.js:94 undefined "parsererror" "SyntaxError: Unexpected token < in JSON at position 0
I ran into a similar error which turned out to be a typo in the HTML within the render function, but that doesn't seem to be the case here.
More confusingly, I rolled the code back to an earlier, known-working version and I'm still getting the error.
Feed.js:
import React from 'react';
var ThreadForm = React.createClass({
getInitialState: function () {
return {author: '',
text: '',
included: '',
victim: ''
}
},
handleAuthorChange: function (e) {
this.setState({author: e.target.value})
},
handleTextChange: function (e) {
this.setState({text: e.target.value})
},
handleIncludedChange: function (e) {
this.setState({included: e.target.value})
},
handleVictimChange: function (e) {
this.setState({victim: e.target.value})
},
handleSubmit: function (e) {
e.preventDefault()
var author = this.state.author.trim()
var text = this.state.text.trim()
var included = this.state.included.trim()
var victim = this.state.victim.trim()
if (!text || !author || !included || !victim) {
return
}
this.props.onThreadSubmit({author: author,
text: text,
included: included,
victim: victim
})
this.setState({author: '',
text: '',
included: '',
victim: ''
})
},
render: function () {
return (
<form className="threadForm" onSubmit={this.handleSubmit}>
<input
type="text"
placeholder="Your name"
value={this.state.author}
onChange={this.handleAuthorChange} />
<input
type="text"
placeholder="Say something..."
value={this.state.text}
onChange={this.handleTextChange} />
<input
type="text"
placeholder="Name your victim"
value={this.state.victim}
onChange={this.handleVictimChange} />
<input
type="text"
placeholder="Who can see?"
value={this.state.included}
onChange={this.handleIncludedChange} />
<input type="submit" value="Post" />
</form>
)
}
})
var ThreadsBox = React.createClass({
loadThreadsFromServer: function () {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function (data) {
this.setState({data: data})
}.bind(this),
error: function (xhr, status, err) {
console.error(this.props.url, status, err.toString())
}.bind(this)
})
},
handleThreadSubmit: function (thread) {
var threads = this.state.data
var newThreads = threads.concat([thread])
this.setState({data: newThreads})
$.ajax({
url: this.props.url,
dataType: 'json',
type: 'POST',
data: thread,
success: function (data) {
this.setState({data: data})
}.bind(this),
error: function (xhr, status, err) {
this.setState({data: threads})
console.error(this.props.url, status, err.toString())
}.bind(this)
})
},
getInitialState: function () {
return {data: []}
},
componentDidMount: function () {
this.loadThreadsFromServer()
setInterval(this.loadThreadsFromServer, this.props.pollInterval)
},
render: function () {
return (
<div className="threadsBox">
<h1>Feed</h1>
<div>
<ThreadForm onThreadSubmit={this.handleThreadSubmit} />
</div>
</div>
)
}
})
module.exports = ThreadsBox
In Chrome developer tools, the error seems to be coming from this function:
loadThreadsFromServer: function loadThreadsFromServer() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function (data) {
this.setState({ data: data });
}.bind(this),
error: function (xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
with the line console.error(this.props.url, status, err.toString() underlined.
Since it looks like the error seems to have something to do with pulling JSON data from the server, I tried starting from a blank db, but the error persists. The error seems to be called in an infinite loop presumably as React continuously tries to connect to the server and eventually crashes the browser.
EDIT:
I've checked the server response with Chrome dev tools and Chrome REST client, and the data appears to be proper JSON.
EDIT 2:
It appears that though the intended API endpoint is indeed returning the correct JSON data and format, React is polling http://localhost:3000/?_=1463499798727 instead of the expected http://localhost:3001/api/threads.
I am running a webpack hot-reload server on port 3000 with the express app running on port 3001 to return the backend data. What's frustrating here is that this was working correctly the last time I worked on it and can't find what I could have possibly changed to break it.
解决方案I experienced this error "SyntaxError: Unexpected token m in JSON at position", where the token 'm' can be any other characters.
It turned out that I missed one of the double quotes in the JSON object when I was using RESTconsole for DB test, as {"name: "math"}, the correct one should be {"name": "math"}
It took me a lot effort to figure out this clumsy mistake. I am afraid others would run into similar bummers.
相关文章