2017-12-11 5 views
1

Es scheint ein param Mismatch zu sein, aber ich habe immer wieder über meinen Router, Modell und Controller geschaut und kann nichts falsch sehen. Jede Hilfe sehr geschätzt.(Phoenix.ActionClauseError) konnte kein passendes finden

CREATE METHOD CONTROLLER:

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 

REACT Formular:

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; 

Ich erwarte einen erfolgreichen Post und speichern in meiner Datenbank. Ich erhalte diese 400-Fehler, und dies in der Konsole:

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

UPDATE PER VORSCHLÄGE. KEINE ERRORS BUT EMPTY DB RECORD erstellt:

[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 
+0

Können Sie die Quelle des Formulars veröffentlichen, die unterbreitet 'zu erstellen '? – Dogbert

+0

@Dogbert Ich wette, das Problem ist 'def create (conn,% {" events "=> event_params}) sollte 'def create (conn,% {} = event_params) do' lesen. – mudasobwa

+0

@mudasobwa Der Formularcode sollte das klarstellen. Mit einem Changeset sollte nach '% {" events "=> event_params}' gepostet werden. Sehen Sie sich die Dateien an, die Scaffolding generiert. – Dogbert

Antwort

0

Das zweite Argument ist axios.post nur die Daten. Die Header und andere Optionen sollten im dritten Argument sein. Ändern Sie Ihre axios.post Aufruf sollte folgendes Ihr Problem beheben:

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

Es war die Art, wie ich die Daten in meinem Beitrag eingenistet hatten. Ich habe es in Seitendaten und Ereignisse eingefügt. Ich habe die Methodensignatur und es befestigt ist und an die DB zu schreiben, wie erwartet:

die Methodensignatur Wechsel auf diese es macht Arbeit:

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

Und nun bekommen Sie die richtigen Werte in die DB eingefügt, die Sie nicht mit meiner Antwort bekommen haben (wie Sie in den Kommentaren gesagt haben)? – Dogbert

Verwandte Themen