React JS with Rails - 使用 URL 访问 JSON 数据答案

【问题标题】：React JS with Rails - Accessing JSON data with URLReact JS with Rails - 使用 URL 访问 JSON 数据
【发布时间】：2015-08-11 12:44:41
【问题描述】：

我正在学习如何在我的 Rails 应用中使用 React JS。 免责声明：这是我第一次玩 JS！

我正在关注Michael Chan at Rails Conf 的演讲。一切都很顺利，直到我点击 CommentsContainer 部分，他从 Rails 路由中获取 cmets 数据。我正在尝试同样的事情，除了在一个简单的 Songs 控制器上（使用脚手架生成，具有名称和艺术家作为属性）。

我在他使用路径获取此数据的部分卡住了，当我尝试运行代码时，我最终得到一个 500 错误页面。我不知道如何调试我的 React 代码，因为浏览器控制台只显示 500 错误。

这是我的看法，

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

这是我的 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} />;
}
});

任何帮助将不胜感激！我只是看着这 500 页不知道该怎么办。

编辑：添加服务器日志

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'

【问题讨论】：

控制台的服务器日志没有显示任何内容？此外，您的开发人员工具中有一个网络选项卡，显示有关正在发出的请求的更多信息。也试试看。
请检查我的更新！
嗯，它说这是布局文件中的语法错误。尝试删除这个 turbolink 的东西，因为你使用的是 React，所以你不需要它。从您的 app/views/layouts/application.html.erb 中删除两个“data-turbolinks-track”=> 真正的哈希键/值对。
这使错误消失了。但是现在我的视图没有显示任何数据。不过我在数据库中有记录。
现在，服务器日志是否显示正在执行的查询？ SELECT * FROM songs 之类的东西或您要获取的任何东西。

标签： javascript ruby-on-rails json reactjs

【解决方案1】：

经过一番挣扎，我终于找到了解决办法！

从 application.html 中删除 Turbolinks。
用这个替换 $.getJSON 函数，

$.ajax({ 网址：this.props.songsPath，数据类型：'json'，成功：函数（数据）{ this.setState({songs: data}); }.bind(这个) });

现在，我真的不太了解 JS，所以我不知道为什么会这样，但它确实有效！干杯。

【讨论】：

正如错误所说，存在语法错误。 (data) => this.setState({songs: data}); - 查看这一行的最后一个字符。你不应该在方法的参数中使用;，js中没有这样的语法。