使用Rails进行React JS-使用URL访问JSON数据

Question

I'm learning how to use React JS with my Rails app. 我正在学习如何在我的Rails应用程序中使用React JS。 Disclaimer: This is the first time I am messing around with JS! 免责声明：这是我第一次弄乱JS！

I'm following a talk by Michael Chan at Rails Conf . 我正在关注Rails Conf上Michael Chan的演讲。 Everything works beautifully until I hit the CommentsContainer part, where he fetches the comments data from a Rails route. 一切正常，直到我点击CommentContainer部分，他从Rails路线中获取评论数据。 I am trying to the same thing, except on a simple Songs controller (generated with a scaffold, having name and artist as the attribute). 除了一个简单的Songs控制器（使用脚手架生成，以名称和艺术家作为属性）外，我尝试使用同一方法。

I am getting stuck at the part where he fetches this data with the path, I end up with a 500 error page when I try to run the code. 我陷入了他用路径获取此数据的部分，尝试运行代码时出现500错误页面。 I don't know how to debug my React code, since the browser console is just showing a 500 error. 我不知道如何调试我的React代码，因为浏览器控制台仅显示500错误。

Here's my view, 这是我的看法

<%= react_component "SongsContainer", { songsPath: songs_path } %>

And here's my React code, 这是我的React代码，

var SongsContainer = React.createClass({
componentWillMount(){
    this.fetchSongs();
    setInterval(this.fetchSongs, 1000);
},

fetchSongs() {
    $.getJSON(
        this.props.songsPath,
        (data) => this.setState({songs: data});
    );
},

getInitialState() {
    return { songs: [] };
},

render() {
    return <Songs songs={this.state.songs} />;
}
});

Any help would greatly be appreciated! 任何帮助将不胜感激！ I'm just looking at this 500 page not knowing what to do. 我只是在看这500页，不知道该怎么办。

EDIT: Adding Server log 编辑：添加服务器日志

Started GET "/" for ::1 at 2015-08-11 18:19:30 +0530
Processing by SongsController#index as HTML
  Rendered songs/index.html.erb within layouts/application (0.6ms)
Completed 500 Internal Server Error in 373ms (ActiveRecord: 0.0ms)

ActionView::Template::Error (SyntaxError: unknown: Unexpected token (10:41)):
    3: <head>
    4:   <title>Albums</title>
    5:   <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    6:   <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    7:   <%= csrf_meta_tags %>
    8: </head>
    9: <body>
  app/views/layouts/application.html.erb:6:in `_app_views_layouts_application_html_erb___3071413699732960348_70238909518380'

Answer 1

Finally after lots of struggle, I found a solution! 经过艰苦的努力，终于找到了解决方案！

Remove Turbolinks from application.html. 从application.html删除Turbolinks。
Replace the $.getJSON function with this, 替换$ .getJSON函数，
$.ajax({ url: this.props.songsPath, dataType: 'json', success: function(data) { this.setState({songs: data}); }.bind(this) }); $ .ajax（{url：this.props.songsPath，dataType：'json'，success：function（data）{this.setState（{songs：data}）;} .bind（this）}）;

Now, I really don't know much about JS, so I don't know why this works, but it just does! 现在，我真的对JS不太了解，所以我不知道为什么会这样，但是确实可以！ Cheers. 干杯。

使用Rails进行React JS-使用URL访问JSON数据

问题描述

1 个解决方案

解决方案1
0 2015-08-12 06:56:10

使用Rails进行React JS-使用URL访问JSON数据

问题描述

1 个解决方案

解决方案1 0 2015-08-12 06:56:10

解决方案1
0 2015-08-12 06:56:10