Ruby3.0.0にバージョンアップしたところ「undefined」になってしまう

Question

#　エラーの状況

• ruby2.6.5から、ruby 3.0.0にバージョンアップを試みたところ、「POST」ボタンを押した際に、非同期通信でメッセージが反映されるものの、内容部分がundefinedになってしまう。（リロードすると、内容部分は反映される）
• 検証キーのエラーを確認したが、エラーにはなっていない。
• ログにおいても、「投稿ができた」ことになっており、エラーが出てこない。

#　コード内容

function post() {
    const submit = document.getElementById("submit_message");
    submit.addEventListener("click", (e) => {
    const formData = new FormData(document.getElementById("self_compassion"));
    const XHR = new XMLHttpRequest();
    XHR.open("POST", "/troubles", true);
    XHR.responseType = "json";
    XHR.send(formData);
    XHR.onload = () => {
      if (XHR.status != 200) {
        alert(`Error ${XHR.status}: ${XHR.statusText}`);
        return null;
      }
      const item = XHR.response.trouble;
      const list = document.getElementById("list_messages");
      const formText = document.getElementById("content_worry");
      if(document.querySelector("#trouble_message_type_trouble").checked) {
      const HTML_trouble= `
      <li class="message-left-side">
        <div class="pic-chat">
          <img src="/sad.png" alt="落ち込んでいる画像">
        </div>
        <div class="text-chat">
        <div class="post-content">
          ${item.worry}　????ここが「undefined」になってしまう
        </div>
        <div class="post-date">
          投稿日時：${item.created_at}　????ここが「undefined」になってしまう
        </div>
      </li>`;
      list.insertAdjacentHTML("afterend", HTML_trouble);
      formText.value = "";
      return false;
    } else (document.querySelector("#trouble_message_type_encouragement").checked)
      const HTML_encouragement= `
      <li class="message-right-side">
        <div class="pic-chat">
          <img src="/kind.png" alt="励ましている画像">
        </div>
        <div class="text-chat">
        <div class="post-content">
          ${item.worry} ????ここが「undefined」になってしまう
        </div>
        <div class="post-date">
          投稿日時：${item.created_at}　????ここが「undefined」になってしまう
        </div>
      </li>`;
      list.insertAdjacentHTML("afterend", HTML_encouragement);
      formText.value = "";
      return false;
    };
    e.preventDefault();
  });
}
window.addEventListener('load', post);

????ソースコード上は以下のようになっています????

<main class="container_chat">
      <form id="self_compassion" action="/troubles" accept-charset="UTF-8" data-remote="true" method="post"><input type="hidden" name="authenticity_token" value="2QlUbuNswbHaCXDdC2+x3zxtu1Chovacki8t92klSxE9i+Bsu67nCdmqlnxUIf0UpoHUPhyujOpAB1Ns7hbikQ==" />
        <div class="form_chat">
          <div class="left_btn"><input type="radio" value="trouble" checked="checked" name="trouble[message_type]" id="trouble_message_type_trouble" />
            <label for="trouble_message_type_trouble">悩みをつぶやく</label>
          </div>
          <div class="right_btn"><input type="radio" value="encouragement" name="trouble[message_type]" id="trouble_message_type_encouragement" />
            <label for="trouble_message_type_encouragement">励ましの言葉をかける</label>
          </div>
          <div class="message_form_text"><input id="content_worry" placeholder="メッセージを入力" size="25" type="text" name="trouble[worry]" /></div>
          <div class="message_btn_text"><input type="submit" name="commit" value="POST" id="submit_message" data-disable-with="POST" /></div>
        </div>
</form>      <div id="list_messages">
        <ul class="messages">
        </ul>
      </div>
      <div class="index_area">
            <li class="message-right-side">
              <div class="pic-chat">
                <img src="/kind.png" alt="励ましている画像">
              </div>
              <div class="text-chat">
                <div class="post-content">
                  こんばんは
                </div>
                <div class="post-date">
                  投稿日時：2021年03月14日(日) 22時07分50秒 +0900
                </div>
              </div>
            </li>

ーー省略ーー

その他の情報

• Rails 6.0.3.5　（ruby 3.0.0で問題なければ、RailsもRails 6.1.3にバージョンアップしたいと考えていた）
• yarn upgradeやbundle updateは実行ずみ。

お聞きしたいこと

• リリースされた内容で、XMLHttpRequestが使えなくなってしまったのだろうかと検索しているのですが、解決方法が見当たりません。
• メソッドによるシンプルな呼び出しなのですが、どの部分がひっかかってしまっているのか分かりません。
• 「こういった部分が原因では」など方向性やヒントでも構いませんので、アイデアをいただけると嬉しいです。

どうぞよろしくお願いします。

追記　検証ツールについて

XMLHttpRequestの中身が空なので、sliceメソッドは使えないというエラーが出ます。

console.log(`${item.worry}`)

itemモデルからworryカラムの内容を取得しているのですが、これがエラーになってしまいます。

追記　コントローラーについて

# app/controllers/troubles_controller.rbの内容

class TroublesController < ApplicationController
  before_action :authenticate_user!

  def index
    @troubles = current_user.troubles.all.order(created_at: :desc)
    @trouble = Trouble.new
  end

  def new
  end

  def create
    trouble = Trouble.new(trouble_params)
    render json: { trouble: trouble } if trouble.save
  end

  private

  def trouble_params
    params.require(:trouble).permit(:message_type, :worry).merge(user_id: current_user.id)
  end
end

Comments

[maisumakun]

ブラウザの開発ツールでレスポンス内容は確認できますか？

[cherry2020]

maisumakunさんありがとうございます。
レスポンス内容は確認できますか？
＞＞追記した内容の意味であっていますか？
モデルからの取得が原因とわかったのですが、なぜなのか未だわかりません????

Answer 1

このあたりはどうでしょうか。

• Ruby 2.6.5 と 3.0.0 で交互にやってみて Ruby バージョンに起因することを再確認する
• Ruby 2.7.2 でもやってみる
• ブラウザーの開発ツールでレスポンスを確認する
• XHR.response.trouble 全体をコンソールとかに表示する
• XHR.response についても

Comments

[cherry2020]

scivolaさん、ありがとうございます！！！
方法について提案くださって助かりました。

手こずって遅くなってしまいお礼が遅くなってしまいすみませんでした。
実践してみているのですが、
・2.7.2では、Undefinedにならずにきちんと表示される
・console.logで一つずつ教えてくださった箇所などみて行ったところ、Railsによるモデルから取得している部分（${item.worry}）がうまく行かないとエラーになっていることがscivolaさんのおかげでわかりました。

シンプルなメソッドなのになぜだろうとまだエラーになっている理由がわからないのですが、引き続き調べています。
ほんとうにありがとうございます。

[scivola]

コントローラーのコードを見せてください。
「リロードすると、内容部分は反映される」とのことなので，TroublesController の index アクションは正常で，create アクションがおかしいのかな？と思いました。

[cherry2020]

返信に気づかず、本当に申し訳ありません????
createアクションは上記のようになっております。
返信いただいて嬉しいです。ありがとうございます。

[cherry2020]

scivolaさん、
railsのバージョンアップも行ったところ、出来ました！！！
railsは'rails', '~> 6.0.0'になっており（バージョン確認するとRails 6.0.3.5）
Gemfileで、Rails 6.1.3と指定してbundle updateしたところ、動くようになりました。

初めてのバージョンアップで動揺していたのですが、返信が遅くなってしまったのにも関わらず
丁寧に教えてくれて本当にありがとうございました。
scivolaさんのおかげで交互にする手段を知れた（rbenvはバージョンアップの切り替えが簡単）
ことが本当に助かりました。