我正在使用带有React和Webpacker的Rails 6 rc1项目。
我目前正在使用private void loadRecentPosts() {
Retrofit retrofit = ApiClient.getClient();
mService = retrofit.create(APIService.class);
mService.getPost()
.subscribeOn(Schedulers.io())
.observeOn(AndroidSchedulers.mainThread())
.subscribe(new Observer<Post>() {
@Override
public void onSubscribe(Disposable d) {
}
@Override
public void onNext(Post post) {
Toast.makeText(getContext(),""+post.getUsername(),Toast.LENGTH_LONG).show();
}
@Override
public void onError(Throwable e) {
Log.d("", "onError: "+e.getMessage());
}
@Override
public void onComplete() {
Toast.makeText(getContext(),"complete",Toast.LENGTH_LONG).show();
}
});
}
在我的Rails应用中渲染React组件。我试图不使用javascript_pack_tag之类的宝石只是为了保持简单。
今天，我发现了一种奇怪的行为，即从链接导航到页面后，我的React组件无法呈现。但是，在页面重新加载时，我的组件已呈现。
react-rails：
Gemfile gem 'rails', '~> 6.0.0.rc1'
gem 'pg', '>= 0.18', '< 2.0'
gem 'puma', '~> 3.11'
gem 'sass-rails', '~> 5'
gem 'webpacker', '~> 4.0'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.5'
gem 'bootsnap', '>= 1.4.2', require: false
gem 'devise', '~>4.6'
group :development, :test do
gem 'pry-byebug'
gem 'rspec-rails', '~> 3.8'
end
group :development do
gem 'web-console', '>= 3.3.0'
gem 'listen', '>= 3.0.5', '< 3.2'
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
end
：
app/views/layouts/application.html.erb <html>
<head>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
....
：
app/javascript/packs/application.js require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
import "bootstrap"
import "../stylesheets/application"
：
app/views/posts/new.html.erb <%= content_tag :div,
id: 'post_data',
data: @post do %>
<% end %>
<div id="render_here"></div>
<%= javascript_pack_tag 'new_post' %>
：（尽管此文件中的React代码与问题无关）
app/javascript/packs/new_post.jsx使用此设置，单击导航到页面的链接后不呈现组件。在页面重新加载时，将呈现该组件。
我尝试了很多事情。
在import React from 'react';
import ReactDOM from 'react-dom';
import PostForm from '../components/PostForm';
document.addEventListener('DOMContentLoaded', () => {
const node = document.getElementById('post_data');
const data = JSON.parse(node.getAttribute('data'));
const dom = document.querySelector('#render_here');
ReactDOM.render(
<PostForm post={data} />,
dom);
});
中，注释掉所有内容并仅保留new_post.jsx后，控制台将两次显示console.log(document.readyState)。在页面加载时，它显示complete。
然后我尝试在loading中使用jQuery的document.ready：
new_post.jsx再次，$(document).ready(function() {
if (pageInitialized) {
return;
}
pageInitialized = true;
console.log('render');
...
在页面导航至之后显示两次。在页面重新加载时，render显示一次。
这是怎么回事？
答案 0 :(得分：1)
我知道这已通过解决方法为您解决，但我在搜索同一问题时遇到的第一个结果就是这个问题，因此，对于以后遇到相同问题的其他人员，我想作一个解释
如此处Rails 5: how to use $(document).ready() with turbo-links所述，一种更好的方法是侦听turbolinks事件。
document.addEventListener("turbolinks:load", ()=> {
alert("loaded");
}
或者如果您需要jQuery
$( document ).on("turbolinks:load", ()=> {
alert("loaded");
}
CoffeScript变体：
document.addEventListener "turbolinks:load", ->
alert "loaded"