Dans un composant d'application React qui gère les flux de contenu de type Facebook, je rencontre une erreur:
Feed.js: 94 "parsererror" non défini "SyntaxError: jeton inattendu <dans JSON à la position 0
J'ai rencontré une erreur similaire qui s'est avérée être une faute de frappe dans le HTML dans la fonction de rendu, mais cela ne semble pas être le cas ici.
Plus déroutant, j'ai restauré le code dans une version antérieure connue et je reçois toujours l'erreur.
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 = ThreadsBoxDans les outils de développement Chrome, l'erreur semble provenir de cette fonction:
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)
});
},avec la ligne console.error(this.props.url, status, err.toString()soulignée.
Puisqu'il semble que l'erreur semble avoir quelque chose à voir avec l'extraction des données JSON du serveur, j'ai essayé de démarrer à partir d'une base de données vide, mais l'erreur persiste. L'erreur semble être appelée dans une boucle infinie, probablement parce que React essaie continuellement de se connecter au serveur et finit par planter le navigateur.
ÉDITER:
J'ai vérifié la réponse du serveur avec les outils de développement Chrome et le client Chrome REST, et les données semblent être JSON correctes.
EDIT 2:
Il semble que bien que le point de terminaison de l'API voulu renvoie effectivement les données et le format JSON corrects, React interroge http://localhost:3000/?_=1463499798727au lieu de ce qui est attendu http://localhost:3001/api/threads.
J'exécute un serveur de rechargement à chaud Webpack sur le port 3000 avec l'application express exécutée sur le port 3001 pour renvoyer les données backend. Ce qui est frustrant ici, c'est que cela fonctionnait correctement la dernière fois que j'ai travaillé dessus et que je ne trouve pas ce que j'aurais pu changer pour le casser.
JSON.parse("<foo>")- une chaîne JSON (avec laquelle vous vous attendez dataType: 'json') ne peut pas commencer <.
NODE_ENV. Voir ceci: github.com/facebookincubator/create-react-app/blob/master/…