使用React.js的Welcome＃索引中的ExecJS :: RuntimeError

我已經開始使用Rails後端學習React.js，現在我堅持使用簡單的任務來顯示用戶。該代碼是下面的：使用React.js的Welcome＃索引中的ExecJS :: RuntimeError

的application.js：

//= require jquery 
//= require jquery_ujs 
//= require bootstrap 
//= require turbolinks 
//= require react 
//= require react_ujs 
//= require components 
//= require_tree .

components.js：

//= require_tree ./components

index.html.erb：

<%= react_component 'Users', { data: @users } %>

資產/ Java腳本/組件/ users.js.coffee：

@Users = React.createClass 
    getInitialState: -> 
     users: @props.data 
    getDefaultProps: -> 
     users: [] 
    render: -> 
     React.DOM.div null, 
      className: 'users' 
      for user in @state.users

資產/ Java腳本/組件/ user.js.coffee：

@User = React.createClass 
    render: -> 
     React.DOM.img null, @props.user.avatar 
     React.DOM.p null, @props.user.username

此代碼返回我ExecJS::RuntimeError in Welcome#index，和具體如下：

SyntaxError: [stdin]:9:28: unexpected indentation 

Extracted source (around line #6): 

<head> 
    <title>Testingapp</title> 
    <!-- the line #6 goes below, stylesheet_link_tag --> 
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
    <%= csrf_meta_tags %> 
</head>

我試圖刪除

//= require tree .

從的application.js和components.js我改變

//= require tree ./components

線

//= require components

和錯誤，則自敗，但反應少了點工作。

來源

2016-05-17 AlexNikolaev94

它在for user in @state.users行失敗。您可以嘗試在className: 'users'之後添加逗號，因爲React元素接受兒童作爲最後一個參數，這就是您可能要做的事情。

您應該結束了，像這樣：

render: -> 
    React.DOM.div null, 
     className: 'users', 
     (@User(user: user, key: user.username) for user in users)

作爲一個側面說明，考慮關閉服務器端呈現在反應護欄，直到你有你的代碼在瀏覽器中運行。這將使調試更容易。

來源

2016-05-17 11:50:26 kulesa

謝謝！我嘗試了你的建議，然後錯誤消失了，但是沒有顯示任何東西:( – AlexNikolaev94

那麼，你需要從這裏開始調試。在所有地方添加一些console.log語句，禁用服務器端渲染並找出發生了什麼對用戶數組有什麼要求嗎？你可以立即修復的另一件事是'@ User'中的'render'函數：你需要將它封裝在一個div中，否則它只返回兩個語句中的後一個'React。 DOM.p'。 – kulesa

使用React.js的Welcome＃索引中的ExecJS :: RuntimeError

回答

相關問題