ফেসবুকের মতো সামগ্রী ফিডগুলি পরিচালনা করে এমন একটি প্রতিক্রিয়া অ্যাপ উপাদানটিতে আমি একটি ত্রুটির মধ্যে চলেছি:
ফিড.জেএস: 94 অপরিজ্ঞাত "পার্সেরিরর" "সিন্ট্যাক্স এরির: অপ্রত্যাশিত টোকেন <জেএসএনে 0 পজিশনে
আমি একটি অনুরূপ ত্রুটির মধ্যে দৌড়েছি যা রেন্ডার ফাংশনটির মধ্যে এইচটিএমএলটিতে টাইপো হিসাবে পরিণত হয়েছিল, তবে এখানে এটি মনে হয় না।
আরও বিভ্রান্তিকরভাবে, আমি কোডটি একটি পূর্ববর্তী, জ্ঞাত-কার্যকারী সংস্করণে ফিরিয়ে দিয়েছি এবং তবুও আমি ত্রুটি পাচ্ছি।
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 বিকাশকারী সরঞ্জামগুলিতে ত্রুটিটি এই ফাংশন থেকে আসছে বলে মনে হচ্ছে:
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)
});
},লাইন দিয়ে console.error(this.props.url, status, err.toString() আন্ডারলাইন।
যেহেতু মনে হচ্ছে ত্রুটিটি সার্ভার থেকে জেএসএন ডেটা টানতে কিছু আছে বলে মনে হচ্ছে, তাই আমি ফাঁকা ডিবি থেকে শুরু করার চেষ্টা করেছি, তবে ত্রুটিটি এখনও থেকেই যায়। সম্ভবত একটি অনন্ত লুপে ত্রুটি বলা হয়েছিল বলে মনে হচ্ছে প্রতিক্রিয়া ক্রমাগত সার্ভারের সাথে সংযোগ স্থাপন করার চেষ্টা করে এবং শেষ পর্যন্ত ব্রাউজারটিকে ক্র্যাশ করে।
সম্পাদনা করুন:
আমি ক্রোম দেব সরঞ্জামগুলি এবং ক্রোম আরএসটি ক্লায়েন্টের সাথে সার্ভারের প্রতিক্রিয়াটি চেক করেছি এবং ডেটা যথাযথ JSON বলে মনে হচ্ছে।
সম্পাদনা 2:
এটি প্রদর্শিত হয় যদিও লক্ষ্যযুক্ত এপিআই এর শেষ পয়েন্টটি সত্যই সঠিক জেএসওএন ডেটা এবং ফর্ম্যাটটি ফিরিয়ে দিচ্ছে, http://localhost:3000/?_=1463499798727প্রত্যাশার পরিবর্তে প্রতিক্রিয়াটি ভোট দিচ্ছে http://localhost:3001/api/threads।
ব্যাকএন্ড ডেটা ফিরিয়ে আনতে আমি এক্সপ্রেস অ্যাপ্লিকেশনটি 3001 পোর্টে চলমান 3000 বন্দরটিতে একটি ওয়েবপ্যাক হট-রিলোড সার্ভার চালাচ্ছি। এখানে হতাশার বিষয়টি হ'ল এটি আমার শেষবারের মতো সঠিকভাবে কাজ করেছিল এবং এটি ভাঙ্গার জন্য আমি কী পরিবর্তন করতে পারি তা খুঁজে পাচ্ছি না।
JSON.parse("<foo>")- জেএসএন স্ট্রিং (যা দিয়ে আপনি প্রত্যাশা করেছেন dataType: 'json') দিয়ে শুরু হতে পারে না <।
NODE_ENV। এটি দেখুন: github.com/facebookincubator/create-react-app/blob/master/…