Dalam komponen aplikasi Bereaksi yang menangani umpan konten seperti Facebook, saya mengalami kesalahan:
Feed.js: 94 tidak terdefinisi "parsererror" "Sintaksaksir: Token tak terduga <dalam JSON di posisi 0
Saya mengalami kesalahan serupa yang ternyata menjadi kesalahan ketik pada HTML di dalam fungsi render, tapi sepertinya tidak demikian di sini.
Lebih membingungkan lagi, saya menggulirkan kode kembali ke versi yang sebelumnya dikenal bekerja dan saya masih mendapatkan kesalahan.
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 = ThreadsBoxDi alat pengembang Chrome, kesalahan tampaknya berasal dari fungsi ini:
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)
});
},dengan garis yang console.error(this.props.url, status, err.toString()digarisbawahi.
Karena sepertinya kesalahannya ada hubungannya dengan menarik data JSON dari server, saya mencoba mulai dari db kosong, tetapi kesalahan tetap ada. Kesalahan tampaknya disebut dalam infinite loop mungkin karena Bereaksi terus menerus mencoba untuk terhubung ke server dan akhirnya crash browser.
EDIT:
Saya telah memeriksa respons server dengan alat dev Chrome dan klien REST Chrome, dan data tampaknya JSON yang tepat.
EDIT 2:
Tampaknya meskipun titik akhir API yang dimaksudkan memang mengembalikan data dan format JSON yang benar, Bereaksi melakukan polling dan http://localhost:3000/?_=1463499798727bukan yang diharapkan http://localhost:3001/api/threads.
Saya menjalankan server hot-reload webpack pada port 3000 dengan aplikasi ekspres berjalan pada port 3001 untuk mengembalikan data backend. Yang membuat frustrasi di sini adalah bahwa ini berfungsi dengan benar saat terakhir kali saya mengerjakannya dan tidak dapat menemukan apa yang bisa saya ubah untuk memecahkannya.
JSON.parse("<foo>")- string JSON (yang Anda harapkan dataType: 'json') tidak dapat dimulai dengan <.
NODE_ENV. Lihat ini: github.com/facebookincubator/create-react-app/blob/master/…