フォロー機能の非同期通信がうまくいかない！！ うまく反映するためにはどうすれば？

Question

解決したいこと

フォロー機能の非同期を反映させたい。
起っているエラー

コンソールに下記のように表示されてしまう。

実際のコード

user/show.html.erb

<%= render "shared/header" %>

<%# 商品の概要 %>
<div class="item-show">
  <div class="item-box">
    <div class='item-img-content'>
      <%= image_tag @user.image, class:"item-box-img" %>
    </div>


      <h3 class="name">
        <%= @user.nickname %>
      </h3>
      <span class="item-postage">
       <%= @user.profession_name %>
      </span>
    </div>
    <%# ログインしているユーザーと出品しているユーザーが、同一人物の場合と同一人物ではない場合で、処理を分けましょう %>
    <% if user_signed_in? %>
      <% if current_user.id == @user.id %>
        <%= link_to 'プロフィールの編集', "/users/edit", method: :get, class: "item-red-btn" %>
        <p class='or-text'>or</p>
        <%= link_to '削除', user_path(@user.id), method: :delete, class:'item-destroy' %>
      <% else %>  
        <div class= "btn" data-id = <%= @user.id %> data-check=<%= @user.followed %>>
          <%= render "relationships/follow_button",user: @user%>
        </div>
      <% end %>
    <% end %>

followed.js

function follow() {
  const users = document.querySelectorAll(".btn");
  users.forEach(function (user) {
    if (user.getAttribute("data-load") != null) {
      return null;
    }
    user.setAttribute("data-load", "true");
    user.addEventListener("click", () => { 
      const userId = user.getAttribute("data-id");
      const XHR = new XMLHttpRequest();
      XHR.open("GET", `/user/${userId}`, true);
      XHR.responseType = "json";
      XHR.send();
      XHR.onload = () => {
        if (XHR.status != 200) {
          alert(`Error ${XHR.status}: ${XHR.statusText}`);
          return null;          
        }
        const flw = XHR.response.user;
        if (flw.followed === true) {
          user.setAttribute("data-check", "true");
        } else if (flw.followed === false) {
          user.removeAttribute("data-check");
        }
      };
    });
  });
}
setInterval(follow, 1000);

# frozen_string_literal: true

class DeviseCreateUsers < ActiveRecord::Migration[6.0]
  def change
    create_table :users do |t|
      ## Database authenticatable
      t.string :nickname,           null: false
      t.string :email,              null: false, default: ""
      t.string :encrypted_password, null: false, default: ""
      t.date   :birthday,           null: false
      t.integer :gender_id,         null: false
      t.integer :form_id,           null: false
      t.string :profession_name,    null: false
      t.string :want_to_do,         null: false
      t.string :can_do_list,        null: false
      t.boolean :followed

routes.rb

Rails.application.routes.draw do
  devise_for :users
  resources :users, :only => [:index, :show]
  root "users#index"
  resources :messages, :only => [:create]
  resources :rooms, :only => [:create, :show, :index]

  resources :relationships
  get 'users/:id', to: 'users#followed'
end

user.controller

  def followed
    user = User.find(params[:id])
    if user.followed 
      user.update(followed: false)
    else
      user.update(followed: true)
    end

    flw = User.find(params[:id])
    render json: { user: flw }
  end

relationships/_follow_button.html

<% unless current_user.id == @user %>
  <% if current_user.following?(@user) %>
    <%= form_for(current_user.relationships.find_by(follow_id: @user.id), html: { method: :delete }) do |f| %>
      <%= hidden_field_tag :follow_id, @user.id %>
      <%= f.submit 'フォローを外す', class: 'btn btn-danger btn-block' %>
    <% end %>
  <% else %>
    <%= form_for(current_user.relationships.build) do |f| %>
      <%= hidden_field_tag :follow_id, @user.id %>
      <%= f.submit 'フォローする', class: 'btn btn-primary btn-block' %>
    <% end %>
  <% end %>
<% end %>

ターミナル

Started GET "/users/3" for ::1 at 2021-02-15 09:14:22 +0900
Processing by UsersController#show as HTML
  Parameters: {"id"=>"3"}
  User Load (0.4ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 4 ORDER BY `users`.`id` ASC LIMIT 1
  User Load (0.3ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 3 LIMIT 1
  ↳ app/users/users_controller.rb:36:in `show'
  Entry Load (0.3ms)  SELECT `entries`.* FROM `entries` WHERE `entries`.`user_id` = 4
  ↳ app/users/users_controller.rb:41:in `show'
  Entry Load (0.4ms)  SELECT `entries`.* FROM `entries` WHERE `entries`.`user_id` = 3
  ↳ app/users/users_controller.rb:42:in `block in show'
  Rendering users/show.html.erb within layouts/application
  Rendered shared/_header.html.erb (Duration: 1.5ms | Allocations: 2196)
  ActiveStorage::Attachment Load (0.5ms)  SELECT `active_storage_attachments`.* FROM `active_storage_attachments` WHERE `active_storage_attachments`.`record_id` = 3 AND `active_storage_attachments`.`record_type` = 'User' AND `active_storage_attachments`.`name` = 'image' LIMIT 1
  ↳ app/views/users/show.html.erb:7
  ActiveStorage::Blob Load (0.4ms)  SELECT `active_storage_blobs`.* FROM `active_storage_blobs` WHERE `active_storage_blobs`.`id` = 1 LIMIT 1
  ↳ app/views/users/show.html.erb:7
  User Exists? (0.5ms)  SELECT 1 AS one FROM `users` INNER JOIN `relationships` ON `users`.`id` = `relationships`.`follow_id` WHERE `relationships`.`user_id` = 4 AND `users`.`id` = 3 LIMIT 1
  ↳ app/models/user.rb:23:in `following?'
  Relationship Load (0.4ms)  SELECT `relationships`.* FROM `relationships` WHERE `relationships`.`user_id` = 4 AND `relationships`.`follow_id` = 3 LIMIT 1
  ↳ app/views/relationships/_follow_button.html.erb:3
  Rendered relationships/_follow_button.html.erb (Duration: 5.4ms | Allocations: 3672)
  Rendered shared/_footer.html.erb (Duration: 0.0ms | Allocations: 5)
  Rendered users/show.html.erb within layouts/application (Duration: 14.3ms | Allocations: 15743)
[Webpacker] Everything's up-to-date. Nothing to do

試したこと

コントローラー、ビュー、jsに誤字がないか確認したが、勉強不足のためエラーの原因発見できず、ご確認いただき、ご指摘をいただけますと幸いです。

Answer 1

定義

users/:id

　

送ろうとしているリクエスト

/user/${userId}

違いますね。

目視ではなく、文字列検索で確認を。
また、定義を利用する場合はコピペするくらいの慎重さを。

Comments

[cametako]

m.ts10806さん
ご対応誠に有難うございます！
上記修正致しましたが、まだ
followed.js:13 GET http://localhost:3000/user/null 404 (Not Found)
と出てしまうようです。この場合の原因がわかれば教えていただきたいです。
ご確認宜しくお願い致します。

[cametako]

get 'user/:id', to: 'users#followed'
このようにルートを修正致しました。

[m.ts10806]

エラーやログをちゃんと読んでほしい。
nullなら正しく渡ってないんでは。

あと、定義を修正するのは基本的に悪手です。
実装に定義をあわせるのではなく、定義に合わせた実装を。

[m.ts10806]

あとGETならブラウザから直アクセスでも結果は見れるので、まずはその確認を。
nullを正しい情報になおしても404ならやはりURL間違ってます。コンテキストパスとかないですかね？