0
ReactJsまたはUIコーディングでは比較的新しいです。一日中この問題をデバッグしようとして無駄に過ごしました。モジュールビルドに失敗しました：SyntaxError：2番目のコンポーネントをレンダリングしようとすると、予期しないトークンエラーが発生しました
が<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RGR</title>
<script src="react-0.14.3.min.js"></script>
<script src="react-dom-0.14.3.min.js"></script>
</head>
<body>
<div id="react"></div>
<div id="react-bucket"></div>
<script src="bundle.js"></script>
<body>
</html>
最初のコンポーネントの反応はただレンダリング：私はここに単一のページで、ここで2つのコンポーネントをレンダリングしようとしています
var React = require("react");
var ReactDOM = require("react-dom");
import Main from "./components/Main";
import Bucket from "./components/Bucket";
import Relay from "react-relay";
ReactDOM.render(<Main />,document.getElementById('react'));
ReactDOM.render(<Bucket />,document.getElementById('react-bucket'));
console.log(Relay.QL`query Test {ServerGroups {_id}}`);
をapp.js - 私は私のReactJsアプリで単一のエントリポイントを持っています良い。しかし、同様のデータを持つ同じ正確なロジックを使用する2番目の「反応バケット」は、まったくレンダリングされません。 、予期しないトークン{justBucketDOMElement}に対して
を期待 - "{" の下
が反応コンポーネントのコードであるを指す：
モジュールの構築に失敗しました：にSyntaxError WebPACKの次のエラーをスロー
render(){
return(
<table>
<tbody>
<tr>
<th>AppName</th>
<th>BucketName</th>
<th>RAMQuotaInGB</th>
<th>ReplicaNumber</th>
<th>ServerList</th>
</tr>
{
this.state.allBuckets.map(function(oneAppBucket){
var justBucketDOMElement = oneAppBucket.buckets.map(function(bucketInfo){
return(
<tr>
<td key={bucketInfo.bucket_name}>{bucketInfo.bucket_name}</td>
<td key={bucketInfo.bucket_name}>{bucketInfo.evictionPolicy}</td>
<td key={bucketInfo.RAMQuota}>{bucketInfo.RAMQuota}</td>
<td key={bucketInfo.ReplicaNumber}>{bucketInfo.ReplicaNumber}</td>
<td key={bucketInfo.ServerList[0]}>{bucketInfo.ServerList.join(",")}</td>
</tr>
)
});
return(
<tr><td key={oneAppBucket.app_name}>{oneAppBucket.app_name}</td></tr>
{justBucketDOMElement} **// this is where the error happens**
)
})
}
</tbody>
</table>
);
}
データが戻ってくるには、以下のようなものです：
{
"BucketList": [
{
"app_name": "gem",
"buckets": [
{
"evictionPolicy": "valueOnly",
"RAMQuota": 3,
"ReplicaNumber": 1,
"ServerList": [
"lpdcbc01a.phx.aexp.com:11210",
"lpdcbc01b.phx.aexp.com:11210",
"lpdcbc01c.phx.aexp.com:11210"
],
"bucket_name": "config"
},
{
"evictionPolicy": "valueOnly",
"RAMQuota": 3,
"ReplicaNumber": 1,
"ServerList": [
"lpdcbc01a.phx.aexp.com:11210",
"lpdcbc01b.phx.aexp.com:11210",
"lpdcbc01c.phx.aexp.com:11210"
],
"bucket_name": "failed_events"
},
{
"evictionPolicy": "valueOnly",
"RAMQuota": 6,
"ReplicaNumber": 1,
"ServerList": [
"lpdcbc01a.phx.aexp.com:11210",
"lpdcbc01b.phx.aexp.com:11210",
"lpdcbc01c.phx.aexp.com:11210"
],
"bucket_name": "events"
}
]
}
ありがとうございました。本当にこれで困惑した。
ありがとうございました！ありがとうございました！今すぐ次の問題に。 – user2405589