Facebook benzeri içerik yayınlarını işleyen bir React uygulaması bileşeninde, bir hatayla karşılaşıyorum:
Feed.js: 94 tanımsız "ayrıştırıcı" "Sözdizimi Hata: JSON konumunda 0 konumunda beklenmeyen simge <
Ben render işlevi içinde HTML bir yazım hatası olduğu ortaya çıktı benzer bir hataya koştu, ama burada böyle görünmüyor.
Daha kafa karıştırıcı olarak, kodu daha eski, bilinen bir sürüme geri aldım ve hala hatayı alıyorum.
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 = ThreadsBoxChrome geliştirici araçlarında, hata bu işlevden geliyor gibi görünüyor:
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)
});
},çizginin console.error(this.props.url, status, err.toString()altı çizili.
Hata sunucudan JSON verileri çekerek bir şey var gibi görünüyor gibi, boş bir db başlayarak denedim, ancak hata devam ediyor. React sürekli sunucuya bağlanmaya çalıştığında ve sonunda tarayıcıyı kilitlediğinden hata muhtemelen sonsuz bir döngüde çağrılmış gibi görünüyor.
DÜZENLE:
Chrome dev araçları ve Chrome REST istemcisi ile sunucu yanıtını kontrol ettim ve veriler uygun JSON gibi görünüyor.
DÜZENLEME 2:
Amaçlanan API bitiş noktası gerçekten doğru JSON verilerini ve biçimini döndürüyor olsa da, React http://localhost:3000/?_=1463499798727beklenen yerine yoklama yapıyorhttp://localhost:3001/api/threads .
Arka uç verilerini döndürmek için bağlantı noktası 3001 üzerinde çalışan ekspres uygulama ile 3000 numaralı bağlantı noktasında bir webpack sıcak yeniden yükleme sunucusu çalıştırıyorum. Burada sinir bozucu olan, bunun üzerinde en son çalıştığımda doğru çalışmasıydı ve kırmak için değiştirebileceğim şeyi bulamıyor.
JSON.parse("<foo>")- (beklediğiniz dataType: 'json') bir JSON dizesi başlayamaz <.
NODE_ENV. Şuna