使用反應軌道的多個未捕獲錯誤寶石

Question

爲了引導我的問題，我遵循this指南。

當嘗試使用Rails建立一個CRUD接口和反應，我收到this錯誤試圖創建一個新的項目時：

addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded.

我不恰當地添加ref屬性，任何JSX不是內部一個render方法，所以我必須在我的資產管道中有多個React副本。

研究產生了以下可能的結果：

1. 介紹webpack或Searchkit，在this建議SO回答，似乎是我的簡單的CRUD接口笨重的解決方法。
2. This未選擇SO答案建議從./app/assets/javascripts/application.js刪除//= require react行。這被證明是不成功的。
3. 問題＃671，從官方的GitHub react-rails回購。 here，完美地概述了我的問題的第一部分。我遵循這個潛在的解決方案，這表明刪除./app/assets/javascripts/server_rendering.js文件的//= require react-server行。這導致了一個新的錯誤，概述如下：

Uncaught ReferenceError: $ is not defined

我假設意味着react_server不僅包含陣營的第二個副本，而且還加載的東西爲我的AJAX調用是至關重要的。

供參考，在這裏是./app/assets/javascripts/application.js內容：

// This is a manifest file that'll be compiled into application.js, which will include all the files 
... 
// about supported directives. 
// 
//= require rails-ujs 
//= require react 
//= require components 
//= require turbolinks 
//= require_tree . 

和./app/assets/javascripts/server_rendering.js：

//= require react_ujs 
//= require react-server 
//= require ./components 
... 

當使用一組省略號，或...，縮短知註釋部分。

• 紅寶石版本：2.3.3p222（2016年11月21日修訂版56859）
• 的Rails版本：5.1.1
• 反應-軌版本：2.2.0

Answer 1

第三電位回答或從./app/assets/javascripts/server_rendering.js中刪除//= require react-server，這是朝正確方向邁出的一步。

刪除此行不會產生新問題，它只是顯示您整個時間都有的另一個錯誤。 react_server未定義用於AJAX調用的$變量，jQuery gem可以。

Found here。我在這個解決方案，因爲錯誤自信：

Uncaught ReferenceError: $ is not defined

是一個jQuery的問題，因爲AJAX調用你很可能使參加他們的官方文檔中引用的形式。 here。

因此，在你的shell中運行gem install jquery-rails後，您./app/assets/javascripts/application.js應該是這樣的：

... 
//= require rails-ujs 
//= require jquery 
//= require react 
//= require components 
//= require turbolinks 
//= require_tree . 

你./app/assets/javascripts/server_rendering.js文件應該是這樣的：

//= require react_ujs 
// require react-server 
//= require ./components 
... 

注意require react-server被註釋掉。

並確保遵循在this SO解答中找到的關於.\app\views\layouts\application.html.erb文件的答案。