（Phoenix.ActionClauseError）が一致を見つけることができませんでした

Question

これはパラメータの不一致のようですが、私はルーター、モデル、コントローラーを何度も見て何か間違って見ることができません。どんな助けでも大歓迎です。

def create(conn, %{"events" => event_params}) do 
    IO.puts "in create" 
    changeset = Events.changeset(%Events{}, event_params) 
    case Repo.insert(changeset) do 
     {:ok, _events} -> 
     events = Repo.all(Events) 
     render conn, "index.json", events: events 
    end 
    end 

MODEL：

defmodule AMHK.Events do 
    use AMHK.Web, :model 

    schema "events" do 
    field :address, :string 
    field :author, :string 
    field :body, :string 
    field :front_page, :boolean 
    field :image, :string 
    field :link, :string 
    field :location, :string 
    field :published, :boolean 
    field :time_date, :string 
    field :title, :string 

    timestamps() 
    end 

    def changeset(struct, params \\ %{}) do 
    struct 
    |> cast(params, [:address, :author, :body, :front_page, :image, :link, 
     :location, :published, :time_date, :title]) 
    end 
end 

ROUTER：

scope "/api", AMHK do 
    pipe_through :api 

    get "/events", EventsController, :index 
    get "/events/:id", EventsController, :show 
    post "/events", EventsController, :create 
    delete "/events/:id", EventsController, :delete 
    put "/events/:id", EventsController, :update 
    end 

が反応FORMの提出：

import React from "react"; 
import axios from "axios"; 

class Form extends React.Component { 
    constructor() { 
    super(); 

    this.state = { 
     address: '', 
     author: '', 
     body: '', 
     front_page: false, 
     image: '', 
     link: '', 
     location: '', 
     published: false, 
     time_date: 'now', 
     title: 'ddddd' 
    } 
    } 

    componentWillMount =() => { 
    console.log("hi") 
    } 

    handleChange (event) { 
    // let newState = {}; 
    // newState[e.target.name] = e.target.value; 
    // this.setState(newState); 

    const target = event.target; 
    const value = target.type === 'checkbox' ? target.checked : target.value; 
    const name = target.name; 

    this.setState({ 
     [name]: value 
    }); 
    } 

    handleSubmit (event) { 
    event.preventDefault(); 
    axios.post('http://localhost:4000/api/events', { 
     headers: {"Content-Type": "application/json"}, 
     data: { 
     events: { 
      address: this.state.address, 
      author: this.state.author, 
      body: this.state.body, 
      front_page: this.state.front_page, 
      image: this.state.image, 
      link: this.state.link, 
      location: this.state.location, 
      published: this.state.published, 
      time_date: this.state.time_date, 
      title: this.state.title 
     } 
     } 
    }) 
    } 


    render() { 
    return (
    <form onSubmit = { 
     this.handleSubmit.bind(this) 
    } > 
     <div className="field"> 
     <label className="label">Title</label> 
     <div className="control"> 
      <input 
      className="input" 
      type="text" 
      onChange={this.handleChange.bind(this)} 
      value = {this.state.title} 
      name="title" 
      /> 
     </div> 
     </div> 
     <div className="field"> 
     <label className="label">Body</label> 
     <div className="control"> 
      <input 
      className="input" 
      type="text" 
      onChange={this.handleChange.bind(this)} 
      value = {this.state.body} 
      name="body" 
      /> 
     </div> 
     </div> 
     <div className="field"> 
     <label className="label"> 
      image 
     </label> 
     <div className="control"> 
      <input 
      className="input" 
      type="text" placeholder="Enter Image URL" 
      onChange={this.handleChange.bind(this)} 
      value = {this.state.image} 
      name="image" 
      /> 
     </div> 
     </div> 
     <div className="field"> 
     <label className="label">link</label> 
     <div className="control"> 
      <input 
      className="input" 
      type="text" 
      onChange={this.handleChange.bind(this)} 
      value = {this.state.link} 
      name = "link" 
      /> 
     </div> 
     </div> 
     <div className="field"> 
     <label className="label">Author</label> 
     <div className="control"> 
      <input 
      className="input" 
      type="text" 
      onChange={this.handleChange.bind(this)} 
      value = {this.state.author} 
      name="author" 
      /> 
     </div> 
     </div> 
     <div className="field"> 
     <label className="label">location</label> 
     <div className="control"> 
      <input 
      className="input" 
      type="text" 
      onChange={this.handleChange.bind(this)} 
      value = {this.state.location} 
      name = "location" 
      /> 
     </div> 
     </div> 
     <div className="field"> 
     <label className="label">Address</label> 
     <div className="control"> 
      <input 
      className="input" 
      type="text" 
      onChange={this.handleChange.bind(this)} 
      value = {this.state.address} 
      name = "address" 
      /> 
     </div> 
     </div> 
     <div className="field"> 
     <label className="label">Published?</label> 
     <div className="control"> 
      <input 
      className="input" 
      type="checkbox" 
      onClick={this.handleChange.bind(this)} 
      checked = {this.state.published} 
      name = "published" 
      /> 
     </div> 
     </div> 
     <div className="field"> 
     <label className="label">Put on front page?</label> 
     <div className="control"> 
      <input 
      className="input" 
      type="checkbox" 
      onClick={this.handleChange.bind(this)} 
      checked = {this.state.front_page} 
      name = "front_page" 
      /> 
     </div> 
     </div> 

     <button 
     type="submit" 
     value="Submit" 
     className="button is-primary" 
     > 
     Submit 
     </button> 
    </form> 
    ) 
    } 
} 

export default Form; 

はCONTROLLERメソッドを作成します

投稿が成功し、dbに保存されます。 SUGGESTIONS PER

(Phoenix.ActionClauseError) could not find a matching AMHK.EventsController.create clause 

がUPDATE：私はコンソールで、この400エラーとこれを取得します。エラーが、空のDB RECORD NOは作成されません：

[debug] QUERY OK source="events" db=4.2ms 
SELECT e0."id", e0."address", e0."author", e0."body", e0."front_page", e0."image", e0."link", e0."location", e0."published", e0."time_date", e0."title", e0."inserted_at", e0."updated_at" FROM "events" AS e0 [] 
[info] Sent 200 in 5ms 
[info] POST /api/events 
in create 
[debug] Processing with AMHK.EventsController.create/2 
    Parameters: %{"events" => %{"address" => "k ", "author" => "k", "body" => "k", "front_page" => true, "image" => "k", "link" => "k", "location" => "k", "published" => false, "time_date" => "now", "title" => "a"}, "headers" => %{"Content-Type" => "application/json"}} 
    Pipelines: [:api] 
inside changes 
[debug] QUERY OK db=2.9ms 
INSERT INTO "events" ("inserted_at","updated_at") VALUES ($1,$2) RETURNING "id" [{{2017, 12, 11}, {16, 2, 25, 497379}}, {{2017, 12, 11}, {16, 2, 25, 497390}}] 
[debug] QUERY OK source="events" db=0.5ms 
SELECT e0."id", e0."address", e0."author", e0."body", e0."front_page", e0."image", e0."link", e0."location", e0."published", e0."time_date", e0."title", e0."inserted_at", e0."updated_at" FROM "events" AS e0 [] 
[info] Sent 200 in 4ms 

IO.inspect paramsは：

%{"events" => %{"address" => "k", "author" => "k", "body" => "k", 
    "front_page" => false, "image" => "k", "link" => "k", "location" => "k", 
    "published" => true, "time_date" => "now", "title" => "ddddd"}, 
    "headers" => %{"Content-Type" => "application/json"}} 
[debug] QUERY OK db=22.4ms 
INSERT INTO "events" ("inserted_at","updated_at") VALUES ($1,$2) RETURNING "id" [{{2017, 12, 11}, {19, 21, 33, 179707}}, {{2017, 12, 11}, {19, 21, 33, 179718}}] 
[debug] QUERY OK source="events" db=9.7ms decode=0.1ms 
SELECT e0."id", e0."address", e0."author", e0."body", e0."front_page", e0."image", e0."link", e0."location", e0."published", e0."time_date", e0."title", e0."inserted_at", e0."updated_at" FROM "events" AS e0 [] 
[info] Sent 200 in 33ms 

Answer 1

axios.postへの第2引数は単なるデータです。ヘッダーとその他のオプションは、3番目の引数に含める必要があります。以下に、あなたのaxios.postの呼び出しを変更すると、あなたの問題を解決する必要があります。

axios.post('http://localhost:4000/api/events', { 
    events: { 
    address: this.state.address, 
    ... 
    }, 
}, {headers: {"Content-Type": "application/json"}}) 

Answer 2

をそれは私が私のポストにデータを入れ子になっていた方法でした。私はサイドデータとイベントに入れていました。私は、メソッドのシグネチャを変更し、予想通り、それは固定され、DBへ​​の書き込みされています。これにメソッドのシグネチャを変更する

はそれを動作可能：

def create(conn, %{"data" => %{"events" => event_params}}) do