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

IT技术 javascript ruby-on-rails json reactjs
2021-05-14 23:44:28

我正在学习如何在我的 Rails 应用程序中使用 React JS。 免责声明:这是我第一次搞乱 JS!

我正在关注Michael Chan 在 Rails Conf 上的演讲一切都很顺利,直到我点击 CommentsContainer 部分,他从 Rails 路由中获取评论数据。我正在尝试同样的事情,除了一个简单的 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'
1个回答

终于经过一番挣扎,我找到了解决方案!

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

    $.ajax({ url: this.props.songsPath, dataType: 'json', success: function(data) { this.setState({songs: data}); }.bind(this) });

现在,我真的不太了解 JS,所以我不知道为什么会这样,但确实如此!干杯。