ActionController::ParameterMissing (param is missing or the value is empty: registration)が起こる。

Question

railsとreactを使ってSPAの開発をしています。
devise_token_authを使って、フォーム（Reactメイン）から送信された値を使って、サインアップを試みている最中です。

フォームからPOSTメソッドを実行すると、以下のようなエラーが出てしまいます。

サーバーサイド

class Api::V1::Auth::RegistrationsController < DeviseTokenAuth::RegistrationsController
    private
      def sign_up_params
        params.require(:registration).permit(:name, :email, :password, :password_confirmation)
      end

      def account_update_params
        params.permit(:name, :nickname, :email, :img)
      end

end

フロント側における、各フォームのname属性では
name="name",
name="email,
name="password",
name="password_confirmation"

としているのに、上記のエラーが出てしまうのはなぜでしょうか？
良ければ解決策のご教授お願いします。

Answer 1

axiosでPOSTメソッドを使うことを諦め、formにaction属性とmethod属性を付与すると一発でいけました。

<form className={classes.form} noValidate action="http://localhost:3000/api/v1/auth" method="POST">

なぜ、axios.postとformの中身をパラメータとして送れないのか不思議でした、、、

Answer 2

params.require(:registration)と書いているのに、registerationをname属性に指定していないからだと思います。

HTMLのname属性とRailsのparamsの受け取り方の対応はこんな感じです。

<input type="text" name="email" ...> => params[:email]
<input type="text" name="registration[email]"...> => params[:registration][:email]

したがって、

params.require(:registration).permit(:name, :email, :password, :password_confirmation)

と書いているのに、フロントでname="name"と書いたらエラーになるのは当然です。

フロントのinput,select,textareaなどのname属性の指定を以下のように修正するとエラーにならないと思います。
name="registration[name]
name="registration[email]
name="registration[password]
name="registration[password_confirmation]

Comments

[taguho]

返信ありがとうございます。
実践したところ、やはり同じエラーが出てしまいました。。。

apiを叩くライブラリとしてaxiosを使っているのですが、何か関係ありますでしょうか？

[mingos]

そうであれば、axiosのパラメータの指定が間違っていると思います。
axiosのPOSTしている部分のソースコードも記載してください。

[taguho]

こちらになります。

import axios from 'axios'

export const userSignup = (params) => {
return axios.post("http://localhost:3000/api/v1/auth/",
{
name: params.name,
email: params.email,
password: params.password,
password_confirmation: params.password_confirmation,
}
)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}

[mingos]

そこですね。
POSTするときのパラメータ名がname,emailなどとなっていますよね？
そこを変える必要があります。

わかりやすくするためにPOSTパラメータを変数にします。
let post_params = {
'registration[name]': params.name,
'registration[email]': params.email,
'registration[password]': params.password,
'registration[password_confirmation]': params.password_confirmation,
};

return axios.post("http://localhost:3000/api/v1/auth/", post_params )

という感じにするべきかと思います。
で、たぶんparamsの構造がこの例で示したようになっていると思うので、
paramsの形が正しければ、
これで済むはずです。
return axios.post("http://localhost:3000/api/v1/auth/", params)

[taguho]

ご丁寧にどうもありがとうございます。
全体像としては以下のような形ですか？

import axios from 'axios'

export const userSignup = (params) => {
let post_params = {
'registration[name]': params.name,
'registration[email]': params.email,
'registration[password]': params.password,
'registration[password_confirmation]': params.password_confirmation,
};

return axios.post("http://localhost:3000/api/v1/auth/", post_params )
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}

[mingos]

そうですね。それでいいはずです。

[taguho]

また同じエラーが出ました、、、
フォーム部分のソースコードも貼り付けます、良ければ確認お願いします。
また、materai-uiをコンポーネントライブラリとして使用しています。
下記のソースコードのname属性にregistration[""]をつけていませんが、つけてもダメでした。

<form className={classes.form} noValidate>
<Grid container spacing={2}>
<Grid item xs={12}>
<TextField
variant="outlined"
required
fullWidth
id="name"
label="Name"
name="name"
autoComplete="lname"
/>
</Grid>

<Grid item xs={12}>
<TextField
variant="outlined"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
/>
</Grid>

<Grid item xs={12}>
<TextField
variant="outlined"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
/>
</Grid>

<Grid item xs={12}>
<TextField
variant="outlined"
required
fullWidth
name="password_confirmation"
label="Password Confirmation"
type="password"
id="password_confirmation"
/>
</Grid>
</Grid>

<Button
type="submit"
fullWidth
variant="contained"
color="primary"
onClick={userSignup} 　←（axiosを使用した変数です。）
className={classes.submit}
>
Sign Up
</Button>

[mingos]

では、このように階層にしてみてください。
手元では動きました。

let post_params = {
registration: {
name: params.name,
email: params.email,
password: params.password,
password_confirmation: params.password_confirmation
}
};

[taguho]

何度もありがとうございます、やっぱりどうしてもうまくいかないので、適当な値を以下のように入れると、Completed 200 OKが出て成功しました。
(例)
let post_params = {
registration: {
name: "google",
email: "[e-mail]",
password: "google",
password_confirmation: "google"
}
};

最終的な原因としては、paramsがコンポーネント間で受け渡せていないようです、なぜなのでしょうか、、、