Sails + ReactJS：意外的令牌，找不到原因

我正在開發一個Sails JS應用程序，我嘗試在其中使用React。自從幾天以來，我對React和Sails都很陌生。我嘗試了一個「簡單」的例子，我有一個用戶列表，我想用React顯示它們的列表。我在「MainController」中有一個返回用戶對象的方法「getUsers」。當我去「主/ getUsers」在瀏覽器中，我得到：Sails + ReactJS：意外的令牌，找不到原因

{ 
    "users": [ 
    { 
     "id": 6, 
     "username": "User1", 
     "password": "sha1$e89ea270$1$5937f3d94f90280e3dc5a435bd8c8128f9d29ab2", 
     "mail": "[email protected]", 
     "pics": null, 
     "createdAt": "2016-02-29T12:58:46.000Z", 
     "updatedAt": "2016-02-29T12:58:46.000Z" 
    }, 
    { 
     "id": 3, 
     "username": "test", 
     "password": "sha1$88a41992$1$f43d52da22e2082a06625063e36c4a965451094f", 
     "mail": "[email protected]", 
     "pics": null, 
     "createdAt": "2016-02-29T12:23:57.000Z", 
     "updatedAt": "2016-02-29T13:05:42.000Z" 
    }, 
    (...) 
    ] 
}

我的代碼，以顯示它們是：

<div id="example">test</div> 

<script type="text/babel"> 
    var User = React.createClass({ 
     render: function() { 
      <p class='oneUserList col-xs-3 col-md-1'> 
       <img src="{this.props.pics} /> 
       {this.props.username} 
      </p> 
     } 
    }); 

    var UserList = React.createClass({ 
     getInitialState: function() { 
      return {users: []}; 
     }, 
     componentDidMount: function() { 
      $.ajax({ 
       url: "/main/getUsers/", 
       dataType: 'json', 
       cache: false 
      }).exec(function (response) { 
       this.setState({users: response.records }); 
      }.bind(this)); 
     }, 
     render: function() { 
      var self = this; 

      var users = this.state.users.map(function (p) { 
       return <User username={p.username} pics = {p.pics} /> 
      }); 

      if (!users.length) { 
       users = <p>Loading users ..</p>; 
      } 

      return (
       {users} 
      ); 
     } 
    }); 

    ReactDOM.render(
     <UserList />, 
     document.getElementById("example") 
    ); 
</script>

我嘗試了很多方法，但我一直有同樣的錯誤：「SyntaxError：embedded：Unexpected token（x：y）」現在它位於'url：「/ main/getUsers」'之前的空間中，但是如果是在ajax上，則在url的r上。等等，我真的不明白爲什麼

如果有人可以幫助我，謝謝

來源

2016-03-01 mel-mouk

你確定它不會在JSX上窒息？當有一個JSX解析器丟失時，通常會出現「意外標記」錯誤 – rossipedia

您的JSX語法不正確。我通過將您的代碼複製到https://babeljs.io/repl/來測試這一點。具體而言，在你的User組件，您有：

<img src="{this.props.pics} />

您需要從該行刪除雙引號。

來源

2016-03-01 17:14:34

就是這樣，認真......><謝謝 –

Sails + ReactJS：意外的令牌，找不到原因

回答

相關問題