私は、babel、webpack、redux、semantic-ui-react で mern スタックを使用して Web アプリを作成しています。
しかし、私はエラーが発生しました
bundle.js の「予期しないトークン <」。
このエラーは、フォーム タグのボタンをクリックしてリクエストを送信した場合にのみ発生します。フォームタグなしでページを作成すると、エラーなく正常に動作します。
これは React での私のコードです。
handleUpload(title, contents, userId) {
return this.props.createPostRequest(title, contents, userId).then(
() => {
if(this.props.post.status === 'SUCCESS') {
alert('Your post is saved successfully.');
browserHistory.push('/');
return true;
} else {
alert('Save Fail: ' + this.props.post.failReason);
return false;
}
}
);
}
render() {
return(
<div className="Write">
<br/>
<br/>
<Form>
<Container text>
<Form.Input label='Title' fluid name='title' placeholder='title'
value={this.state.title} onChange={this.handleChange}>
<input/>
</Form.Input>
<Form.TextArea rows='20' name='contents' placeholder='Write here!'
value={this.state.contents} onChange={this.handleChange}>
<textarea/>
</Form.TextArea>
<br/>
<Button.Group>
<Button color='orange' as={Link} to='/'>Cancel</Button>
<Button.Or/>
<Button positive onClick={this.handleUpload}>Save</Button>
</Button.Group>
</Container>
</Form>
</div>
);
}
文字を入力して保存ボタンをクリックすると、警告メッセージが表示されます
あなたの投稿は正常に保存されました..
また、入れたデータはmongodbに保存されます。しかし、[OK] をクリックすると、URL が'localhost:3000/post/write
' から ' ' に変わりlocalhost:3000/post/write?title=blah&contents=blah
ます。URLの何とかは、入力タグに入れたものです。次に、コンソールは言う
予期しないトークン <.
しかし、上記のコードでフォームタグを使用しない場合、問題なく動作しますが、何が問題なのかまったくわかりません..フォームタグはセマンティック-ui-reactからのものです。だから私はそれが必要です。Form を使わなければ問題ないのですが、semantic-ui から提供されるデザインはあきらめるべきです。
これについて知っている人はいますか?サーバー側がそのフォームタグからの投稿リクエストを処理した後、react.jsがindex.htmlのbundle.jsを理解するのに問題を起こすフォームタグのHTTP POSTに関連していると思います。