in

javascript – «SyntaxError: token inesperado

apple touch icon@2

En un componente de la aplicación React que maneja feeds de contenido similar a Facebook, me encuentro con un error:

Feed.js: 94 undefined «parsererror» «SyntaxError: Token inesperado

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í.

De manera más confusa, devolví el código a una versión anterior que funcionaba y sigo recibiendo 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 linea 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 una base de datos en blanco, pero el error persiste. El error parece llamarse en un bucle infinito, presumiblemente, ya que 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 la API previsto devuelve los datos y el formato JSON correctos, React está sondeando http://localhost:3000/?_=1463499798727 en lugar de lo esperado http://localhost:3001/api/threads.

Estoy ejecutando un servidor de recarga en caliente de paquete web en el puerto 3000 con la aplicación rápida ejecutándose en el puerto 3001 para devolver los datos del backend. Lo que es frustrante aquí es que esto funcionaba correctamente la última vez que trabajé en él y no puedo encontrar lo que podría haber cambiado para romperlo.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

tkgrid

Python – Método Tkinter grid ()

gfg 200x200 min

Diferencia entre variables estáticas y no estáticas en Java