[Rails API]［React］axiosを用いて"POST"したい！

Question

#はじめに

React初心者です。
RailsでAPIをつくり、Reactでフロント部分を書く練習をしています。
アプリケーションの内容は、ユーザー（post.author）がなにか（post.content）をつぶやくといいったシンプルなものです。

Rails => localhost:4000
React => localhost:3000を使用しています。

フォームから受け取ったデータでPost.createをしたいのですが、うまくいきません。

#API側（Rails）ファイル構造

Railsのファイルの中にcreate-react-app app_frontendしました。

####コード
routes.rb

Rails.application.routes.draw do
  resources :posts, only: [:index, :create, :destroy], format: 'json'
end

posts_controller.rb

class PostsController < ApplicationController
  def index
    @post = Post.all
    render json: @post
  end

  def create
    @post = Post.create(post: params[:post])
    render json: @post
  end

  def destroy
    @post = Post.find(params[:id])
    if @post.destroy
      head :no_content, status: :ok
    else
      render json: @post.errors, status: :unprocessable_entity
    end
  end

  def post_params
    params.require(:post).permit(:author, :content)
  end

end

#フロントエンド側（React）のファイル構造

src
├── components
│   ├── List.jsx   ##axios.get を用いてJSONを取得し一覧表示しています。
│   └── New.jsx    ##axios.post を用いてPost.createしたい。
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── ServiceWorker.js

####コード
App.js

import React from 'react';
import { BrowserRouter as Router, Link, Switch, Route } from 'react-router-dom';
import List from './components/List';
import New from './components/New';
import './App.css';

const App = () => {
  return (
    <Router>
      <div id="App">
        <Header />　
          <Switch>
            <Route exact path='/' component={ List }/>
            <Route exact path='/new' component={ New } />
          </Switch>
        <Footer />
      </div>
    </Router>
  );
}
const Header = () => (
  <nav className="navbar navbar-expand-xl navbar-light bg-dark">
    <div className="container">
      <Link to="/" className="navbar-brand text-white">SampleTodo</Link>
      <Link to="/new" className="navbar-brand text-white">新規投稿</Link>
    </div>
  </nav>
)
const Footer = () => (
  <footer className="footer footer-expand-xl bg-light">
    <div className="container">
      <p className="text-muted">SampleTodo</p>
    </div>
  </footer>
)

export default App;

components/List.jsx

import React, { Component } from 'react';
import axios from 'axios'

class List extends Component {
  constructor(props) {
    super(props)
    this.state = {
      posts: []
    };
  }

  componentDidMount() {
    axios.get('http://localhost:4000/posts')
    .then((results) => {
      this.setState({posts: results.data})
    })
    .catch((data) =>{
      console.log(data)
    })
  }

  render() {
    const {posts} = this.state
    return (
      <div>
        {posts.map((post) => {
            return <li key={post.id}> { post.author }{ post.content }</li>
          })}
      </div>
    );
  }
}
export default List;

components/New.jsx

import React, { Component } from 'react';
import axios from 'axios'

class New extends Component {
  constructor(props){
    super(props);
    this.state = {
      author: '',
      content: ''
    };
  }

  handleInputValue = (event) => {
    const field = event.target.name;
    this.state[field] = event.target.value;
    this.setState({
      [field]: this.state[field]
    });
  }

  handleSubmit = () => {
    axios({
      method : "POST",
      url : "http://localhost:4000/posts",
      data : { author: this.state.author, content: this.state.content }
    })
    .then((response)=> {
      console.log(this.props)
      this.props.history.push('/');
    })
    .catch((error)=> {
      console.error(error);
    });
  }

  render() {
   const { author, content } = this.state;
   return (
     <div>
       <p>新規投稿</p>
       <div>
         <form onSubmit={this.handleSubmit}>
           <label>偉人 : </label>
           <input type="text" name="author" value={ author } onChange={ this.handleInputValue } />
           <label>名言 : </label>
           <textarea name="content" value={ content } onChange={ this.handleInputValue } />
           <input type="submit" value="Submit" />
         </form>
       </div>
     </div>
   );
 }
}


export default New;

#起こっていること
現段階では、フォームに入力しても、URLに入力内容がくっつくだけです。
例えば、author: "テスト"がcontent: "テストテスト"と入力すると、
URLがhttp://localhost:3000/newからhttp://localhost:3000/new?author=テスト&content=テストテストが変化するだけで、Post.createできません。

#お願いしたいこと
・問題は、components/New.jsxにある下記コードだと思うのですがどのように修正すればいいのかわからないです。

  handleSubmit = () => {
    axios({
      method : "POST",
      url : "http://localhost:4000/posts",
      data : { author: this.state.author, content: this.state.content }
    })
    .then((response)=> {
      console.log(this.props)
      this.props.history.push('/');
    })
    .catch((error)=> {
      console.error(error);
    });
  }

・またaxiosの使い方があまりわかっていないので、わかりやすい参考サイトがあれば教えて頂きたいです。

宜しくお願いします。

Answer 1

こんにちは。

axios によって送りたいAPIへのリクエストの他に、<form /> がsubmitされたことによるリクエストが発生しているために意図しない挙動になっているものと思います。

以下にて、修正する方法を２つ挙げます。

(1) <form /> がsubmitされたときのデフォルト動作を抑止

New.jsx で、handleSubmit　の冒頭、

  handleSubmit = () => {
    axios({
      method : "POST",

となっているのを以下

  handleSubmit = (e) => {
    e.preventDefault();
    axios({
      method : "POST",

のようにして、<form />がsubmitされたときのデフォルト動作を抑止します。

(2) <form /> を使わないようにする。

axios でリクエストを送るので <form /> 自体が不要ですから、renderで返している以下の部分

  <div>
    <form onSubmit={this.handleSubmit}>
      <label>偉人 : </label>
      <input type="text" name="author" value={ author } onChange={ this.handleInputValue } />
      <label>名言 : </label>
      <textarea name="content" value={ content } onChange={ this.handleInputValue } />
      <input type="submit" value="Submit" />
    </form>
  </div>

から、<form /> を取り去り、かつ、ボタンをクリックしたときにhandleSubmitが呼ばれるようにすればよいので、以下

  <div>
    <label>偉人 : </label>
    <input type="text" name="author" value={ author } onChange={ this.handleInputValue } />
    <label>名言 : </label>
    <textarea name="content" value={ content } onChange={ this.handleInputValue } />
    <input type="button" onClick={this.handleSubmit} value="Submit" />
  </div>

のように修正します。

上記の(1)または(2)の修正によって、意図通りボタンをクリックしたときに、axiosからPOSTでリクエストが送られると思います。

それと、蛇足ながらもう一点、ご質問の本題とは関係ありませんが、以下の部分

  handleInputValue = (event) => {
    const field = event.target.name;
    this.state[field] = event.target.value;
    this.setState({
      [field]: this.state[field]
    });
  }

は、より手短かに以下でよいかと思います。

  handleInputValue = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    });
  }

以上参考になれば幸いです。

Comments

[uk_63]

何度も質問に答えてくださってありがとうございます！
いつも丁寧でわかりやすく参考になり、助かっています。

[jun68ykt]

どういたしまして。解決されたようでよかったです????