Ошибка сборки модуля: SyntaxError: непредвиденная ошибка маркера при попытке отобразить второй компонент

Я относительно новичок в ReactJs или кодировании пользовательского интерфейса в целом. Целый день пытался отладить эту проблему, но безрезультатно. У меня есть единственная точка входа в моем приложении ReactJs — app.js

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}}`);

Я пытаюсь отобразить 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>

Первый компонент «реагирует» отображается просто отлично. Но второй «реагирующий ведро», который использует ту же самую логику с аналогичными данными, вообще не отображается. Webpack выдает следующую ошибку:

Ошибка сборки модуля: SyntaxError: Ожидается непредвиденный токен

против {justBucketDOMElement} - указывая на "{"

Ниже приведен код компонента реакции.

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"
      }
    ]
  }

Большое спасибо за помощь. Действительно был в тупике с этим.


webpack reactjs javascript reactjs-flux
person user2405589    schedule 21.07.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Дело в том, что return должен возвращать один объект, вы можете попробовать обернуть их div.

return(
    <div>
        <tr><td key={oneAppBucket.app_name}>{oneAppBucket.app_name}</td></tr>
        {justBucketDOMElement}    **// this is where the error happens**
    </div>
)
person Mamdouh Alsarayreh    schedule 22.07.2017
comment
Благодарю вас! Благодарю вас! Теперь о следующих проблемах. - person user2405589; 23.07.2017