JavaScriptのための`json: { trouble: trouble }`とRailsのcreateアクションが上手く連携できない。

実装したいこと

オリジナルアプリを作っています。
フォームにテキストを入力すると、テキストが非同期通信で反映され、テキストがデータベースに保存されるようにしたいです。

###　エラー内容

UserモデルとTroubleモデルでアソシエーションを組んでいます。
エラーの内容を見て、JavaScript側ではなく、サーバー側に問題があると思っています。運んだストロングパラメータを保存したあと、JavaScript側に、json形式で渡す準備をする実装をしたいのですが、saveに対してエラーが出てしまい保存できません。
binding.pryでストロングパラメーターの内容を確認しましたが、二次元ハッシュの位置などは合っているのではないかと思っています。
何故保存しようとするとメソッドが定義されていないとエラーになってしまうのかがわかりません。

（補足）上の段で上手くいっているのは、コントローラーのcreateアクションにおけるif trouble.saveを消した時です。消してしまうと、データベースに保存できず、ホーム面とは全く関係のない以下のような画面に遷移してしまいます。

コントローラーの内容

ruby
1class TroublesController < ApplicationController
2  before_action :authenticate_user!
3
4  def index
5    @troubles = current_user.troubles.all.order(created_at: :desc)
6    @trouble = Trouble.new
7  end
8
9  def new
10  end
11
12  def create
13    # binding.pry
14    trouble = Trouble.new(trouble_params)
15    render json: { trouble: trouble } if trouble.save
16  end
17
18  private
19
20  def trouble_params
21    params.require(:trouble).permit(:worry).merge(user_id: current_user.id)
22  end
23end

JavaScriptの内容

ruby
1function post() {
2  const submit = document.getElementById("submit_btn");
3  submit.addEventListener("click", (e) => {
4    const formData = new FormData(document.getElementById("new-article"));
5    const XHR = new XMLHttpRequest();
6    XHR.open("POST", "/troubles", true);
7    XHR.responseType = "json";
8    XHR.send(formData);
9    XHR.onload = () => {
10      if (XHR.status != 200 ){
11        alert(`Error ${XHR.status}: ${XHR.statusText}`);
12        return null;
13      }
14      const item = XHR.response.trouble;
15      //レスポンスのうち、コントローラー側で指定したjson形式のデータを変数に代入
16      const contentsArea = document.getElementById("contents_area");
17      //今回投稿したデータを追加する要素の取得(追加する要素の親要素)
18      const HTML = `
19       <div class="trouble">
20          ${ item.trouble }
21        </div>`;
22      //親要素に直前で定義した要素を追加
23      contentsArea.insertAdjacentHTML("afterbegin", HTML);
24      //親要素内の最上部に追加
25      articleText.value = "";
26    };
27    e.preventDefault();
28  })
29}
30window.addEventListener('load', post);