In einer React-App-Komponente, die Facebook-ähnliche Content-Feeds verarbeitet, tritt ein Fehler auf:
Feed.js: 94 undefinierter "Parsererror" "SyntaxError: Unerwartetes Token <in JSON an Position 0
Ich bin auf einen ähnlichen Fehler gestoßen, der sich als Tippfehler im HTML-Code innerhalb der Renderfunktion herausstellte, aber das scheint hier nicht der Fall zu sein.
Verwirrender ist, dass ich den Code auf eine frühere, bekanntermaßen funktionierende Version zurückgesetzt habe und immer noch den Fehler erhalte.
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 = ThreadsBoxIn Chrome-Entwicklertools scheint der Fehler von dieser Funktion zu stammen:
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)
});
},mit der Linie console.error(this.props.url, status, err.toString()unterstrichen.
Da es so aussieht, als hätte der Fehler etwas mit dem Abrufen von JSON-Daten vom Server zu tun, habe ich versucht, von einer leeren Datenbank aus zu starten, aber der Fehler bleibt bestehen. Der Fehler scheint vermutlich in einer Endlosschleife aufgerufen zu werden, da React ständig versucht, eine Verbindung zum Server herzustellen, und schließlich den Browser zum Absturz bringt.
BEARBEITEN:
Ich habe die Serverantwort mit den Chrome-Entwicklungstools und dem Chrome REST-Client überprüft, und die Daten scheinen korrekt zu sein.
EDIT 2:
Es scheint, dass der beabsichtigte API-Endpunkt tatsächlich die richtigen JSON-Daten und das richtige JSON-Format zurückgibt, React jedoch http://localhost:3000/?_=1463499798727anstelle der erwarteten Abfragen abruft http://localhost:3001/api/threads.
Ich verwende einen Webpack-Hot-Reload-Server auf Port 3000, wobei die Express-App auf Port 3001 ausgeführt wird, um die Backend-Daten zurückzugeben. Was hier frustrierend ist, ist, dass dies das letzte Mal, als ich daran gearbeitet habe, richtig funktioniert hat und ich nicht finden kann, was ich möglicherweise geändert haben könnte, um es zu brechen.
JSON.parse("<foo>")- eine JSON-Zeichenfolge (mit der Sie rechnen dataType: 'json') kann nicht beginnen <.
NODE_ENV. Siehe dies: github.com/facebookincubator/create-react-app/blob/master/…