En un componente de la aplicación React que maneja fuentes de contenido similares a Facebook, me encuentro con un error:
Feed.js: 94 "parsererror" indefinido "SyntaxError: token inesperado <en JSON en la posición 0
Me encontré con un error similar que resultó ser un error tipográfico en el HTML dentro de la función de renderizado, pero ese no parece ser el caso aquí.
Más confuso, volví el código a una versión anterior que funcionaba bien y todavía recibo el 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
En las herramientas para desarrolladores de Chrome, el error parece provenir de esta función:
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)
});
},
con la línea console.error(this.props.url, status, err.toString()subrayada
Como parece que el error parece tener algo que ver con extraer datos JSON del servidor, intenté comenzar desde un db en blanco, pero el error persiste. El error parece ser llamado en un bucle infinito presumiblemente cuando React intenta continuamente conectarse al servidor y finalmente bloquea el navegador.
EDITAR:
Verifiqué la respuesta del servidor con las herramientas de desarrollo de Chrome y el cliente REST de Chrome, y los datos parecen ser JSON adecuados.
EDITAR 2:
Parece que aunque el punto final de API previsto está devolviendo los datos y el formato JSON correctos, React está sondeando en http://localhost:3000/?_=1463499798727lugar de lo esperado http://localhost:3001/api/threads.
Estoy ejecutando un servidor webpack hot-reload en el puerto 3000 con la aplicación express ejecutándose en el puerto 3001 para devolver los datos de back-end. Lo frustrante aquí es que esto funcionó correctamente la última vez que trabajé en él y no puedo encontrar lo que podría haber cambiado para romperlo.
JSON.parse("<foo>"): una cadena JSON (con la que esperas dataType: 'json') no puede comenzar <.
NODE_ENV. Vea esto: github.com/facebookincubator/create-react-app/blob/master/…