updateを行うと新しいデータと古いデータが二重に保存されてしまう

Question

前提・実現したいこと

RailsとNuxtを使用してupdateアクションを実装しています。
更新自体にエラーは出ないのですが、更新をすると編集前のデータと新しいデータが両方保存されてしまいます。

該当のソースコード

controller

class Api::V1::PostsController < ApplicationController
	def index
		posts = Post.all
		render json: posts
	end

	def create
		posts = Post.new(create_params)
		if posts.save
			render json: posts, status: :created
		else
			ender json: { errors: post.errors.full_messages },	status: :internal_server_error
		end
	end

	def show
		content = post.post_items
		render json: {"post": post, "content": content}, status: :ok
 	end
#今回対象
//////////////////////////////////////////////////////////////////////
#updateを実行すると新旧のデータが保存されてしまう
#accepts_nested_attributes_forを使用
	 def update
		if post.update(update_params)
			head :ok 
		else
			render json: { errors: post.errors.full_messages }, status: :internal_server_error
		end
	 end
	 
//////////////////////////////////////////////////////////////////////

	 def destroy
  	if	post.destroy
		 render json: {}, status: :ok
		else
		render json: {}, status: :internal_server_error
		end
	 end

		private
		def post 
			@post ||= Post.find(params[:id])
		end 

		def post_item_params
		  [:id, :content, :status]
		end

		 
		 def update_params
			 params.require(:post).permit(post_items_attributes: post_item_params)
		 end

		 def create_params
			 params.require(:post).permit(:title, :author, :image, post_items_attributes: post_item_params)
		 end
end

model

class Post < ApplicationRecord
	has_many :post_items, dependent: :destroy
	accepts_nested_attributes_for :post_items, allow_destroy: true

	validates :title, presence: true
	validates :author, presence: true
	validates :image, presence: true
end

store

import * as url from './constants/url'

export const actions = {
  // ユーザーが選択した本をサーバーに送る
  post (context) {
    const list = context.state.todos.list
    const selectedBook = context.state.book.selectedBook

    // サーバーに送る配列を作成
    const postItemsAttributes =
      list.map((item) => {
        return {
          content: item.content,
          status: item.status
        }
      })

    // plugin/bookInfo  $title,$author,$image
    this.$axios.$post(url.POST_API + 'posts', {
      post: {
        title: this.$title(selectedBook),
        author: this.$author(selectedBook),
        image: this.$image(selectedBook),
        post_items_attributes: postItemsAttributes
      }
    })
      .then((responseBook) => {
        context.commit('book/userBook', responseBook)
        context.commit('book/clearBook')
        context.commit('todos/clear')
      })
  },
  get (commit) {
    this.$axios.$get(url.POST_API + 'posts')
      .then((response) => {
        commit('registerdBook', response)
      })
  },

  // 本を削除
  delete (context) {
    const bookId = context.state.book.selectedBook.id
    this.$axios.$delete(url.POST_API + 'posts/' + bookId)
  },

  // 更新　今回対象
///////////////////////////////////////////////////////////////////////
  update (context) {

　// 編集データのリストを取得
    const list = context.state.todos.list

//送り先ID
    const selectedBook = context.state.book.selectedBook

// 編集したデータをmapで取り出し
    const postItemsAttributes =
    list.map((item) => {
      return {
        content: item.content,
        status: false
      }
    })
    this.$axios.$patch(url.POST_API + 'posts/' + selectedBook.id, {
      post: {
        post_items_attributes: postItemsAttributes
      }
    })
  }
///////////////////////////////////////////////////////////////////////

}

補足情報（FW/ツールのバージョンなど）

Nuxt 2.15
Rails 6

Comments

[shinoharat]

該当部分の view や controller のコードを質問文に追加してください。

Answer 1

原因

送信データを生成するとき、id を指定していないため、Rails がすべて新規データと判断しているんだと思います。

    const postItemsAttributes =
    list.map((item) => {
      return {
        content: item.content,
        status: false
      }
    })

修正案

list に post_items の id が含まれているなら、

      return {
+       id: item.id,
        content: item.content,
        status: false
      }

のように変更すれば上手くいきそうな気がします。
新規データの場合は item.id が null か空文字にすれば Rails が良しなに解釈してくれたはずです。

記憶を頼りに書いているので、間違っていたらすみません。
曖昧な回答ですみませんが、参考になれば幸いです。