常連

社会貢献

自己紹介

###前提・実現したいこと
はじめてこちらで質問させていただきます。

SNSのようなRailsアプリを
Herokuでのデプロイを試すにあたって
マイグレーションで下記のようなログでのエラーメッセージが発生しております。
アプリの公開自体はできるのですが、DBとの接続がうまく行っていないからか画面遷移がしっかりと行えません。
ローカルでは正常に動作します。

・Rails 4.2.6
・MySQL2 （HerokuもMySQL2への接続に変更済み）

###エラーメッセージ
```
Running rake db:migrate on ⬢ appname... up, run.6225 (Free)
Migrating to AddGroupIdToUsers (20161124123341)
== 20161124123341 AddGroupIdToUsers: migrating ================================
-- add_column(:users, :shop_id, :integer)
rake aborted!
StandardError: An error has occurred, all later migrations canceled:

Mysql2::Error: Duplicate column name 'shop_id': ALTER TABLE `users` ADD `shop_id` int(11)
```




###試したこと


・20161124123341 AddGroupIdToUsers のマイグレーションファイルは必要なかったため
 rails destroy migrationで削除（これがいけなかったのでしょうか。）
 そのため、マイグレーションファイルは以下のようになっております。


```ここに言語を入力
 Status   Migration ID    Migration Name
--------------------------------------------------
   up     20161123122710  Devise create users
   up     20161124115754  Add attachment avatar to users
   up     20161124122756  ********** NO FILE **********
   up     20161124123203  Add shop id to users
   up     20161124125420  Remove created at from shops
   up     20161128125741  Create talks

```



初心者のため、非常に漠然とした質問となり大変恐縮ですが
このエラーを解消する術をご教授いただけますと幸いです。。

Railsのマイグレーションエラーについて

###前提・実現したいこと
RailsアプリケーションにReactを導入し、その中でAjaxを利用して投稿をPOSTする機能を作成しています。
POSTする部分までは作成できたのですが、さらに、POST後にPOSTした内容を表示する機能を作成したいと思っています。

Rails 4.2.2   
Ruby 2.0.0   
React
Ajax
で開発をしています。

###実装がうまくいかない箇所

![イメージ説明](88a26f3d3da83fdb2316c9111042088b.png)

このスクリーンショット内の、テキストフォームの「POST」というテキストを
POSTボタンがクリックされた後にテキストフォームの上あたりに表示したいのですが
POST成功後、表示する部分を実装できずにいます。

現状では、POSTボタンタップ後、下記のようなサーバーログが表示され
POST自体は成功しています。

```POST時のサーバーログ
Started POST "/microposts" for ::1 at 2017-01-15 17:20:21 +0900
Processing by MicropostsController#create as */*
  Parameters: {"micropost"=>{"content"=>"POST"}}
  User Load (0.2ms)  SELECT  "users".* FROM "users" WHERE 

中略

Completed 302 Found in 16ms (ActiveRecord: 9.5ms)
```

ただ、上記のように投稿後に表示する部分がうまくいかず、下記のスクリーンショットのような表示となってしまいます。
本当は、ここでテキストフォームと「MessageBox」というテキストの間に投稿した内容を表示したいです！！

![イメージ説明](094f043a15caf85fddce72055d7baa20.png)


###該当のソースコード
reactで投稿する実装は、下記のサイトを参考にしています
http://ruby-rails.hatenadiary.com/entry/20151122/1448118932

まず、テキストフォームを生成して、POSTする内容を受け取るコードは次のようになっています。
```javascript
var MessageForm = React.createClass({
  handleSubmit: function(event) {
    event.preventDefault();
    var user = this.refs.user.value.trim();
    // 親コンポーネントのMessageBocのイベントを呼び出す
    this.props.onMessageSubmit( user );
    // フォームの内容を削除
    this.refs.user.value = '';
  },

 // 投稿用のフォームを作成して、'user'として内容を受け取る
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Title" ref='user'/>
        <input type="submit" value="Post" />
      </form>
    );
  }
});

```

次に、上記のコードから投稿する内容を受取、AjaxでPOSTするコードが以下のようになっています。

```javascript
var MessageBox = React.createClass({
  getInitialState: function() {
    // isLoading = true : ロード中を表示
    return { messages: [], isLoading: true };
  },

...中略

 // 投稿の内容をAjaxでPOST
  handleMessageSubmit: function(message) {
    $.ajax({
      url: 'microposts',
      datatype: 'json',
      type: 'POST',
      beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
      data: {
        micropost: { content: message }
      },
      success: function(message) {
        var newMessages = this.state.messages.concat(message);
        this.setState({ messages: newMessages });
      }.bind(this),
      error: function(_xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },

  render: function() {
    var messageItems = this.state.messages.map(function(message) {
      return (
        <MessageItem key={message.id} message={message}/>
      );
    });

  // ボタンがクリックされた時に、投稿する内容を受け取ってhandleMessageSubmitに渡す
    return (
      <div>
        <h1>Message Box</h1>
        <div className="messageBox">
          {messageItems}
          <MessageForm onMessageSubmit={this.handleMessageSubmit}/>
        </div>
      </div>
    );
  }
});

```

最後に、投稿した内容を表示するためのコードが下記のようになっています。

```javascript
var MessageItem = React.createClass ({
  render: function() {
    return (
      <div className="message">
        <h2 className="messageUser">{this.props.message.user}</h2>
      </div>
    );
  }
});
```
必要な情報などあれば、いっていただけると助かります。


###追記

編集依頼にいただいた内容ですが、handleMessageSubmitが実行された際には、下記のサーバーログが残っていました。

```
Started POST "/microposts" for ::1 at 2017-01-16 19:48:46 +0900
Processing by MicropostsController#create as */*
  Parameters: {"micropost"=>{"content"=>"サンプル"}}
  User Load (1.0ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? LIMIT 1  [["id", 103]]
   (0.5ms)  begin transaction
  SQL (3.0ms)  INSERT INTO "microposts" ("content", "user_id", "created_at", "updated_at") VALUES (?, ?, ?, ?)  [["content", "サンプル"], ["user_id", 103], ["created_at", "2017-01-16 10:48:46.294594"], ["updated_at", "2017-01-16 10:48:46.294594"]]
   (0.9ms)  commit transaction
Redirected to http://localhost:3000/home
Completed 302 Found in 59ms (ActiveRecord: 5.5ms)
```

302が返ってきているようなのですが、これが問題なのでしょうか、、


もう1点、MessageItemの動きを調べている時に気づいた点があったので記載します。

まず、MessageItemが呼び出されていないかも、と思ったので、MessageItemメソッドの中身を
```
var MessageItem = React.createClass ({
  render: function() {
    return (
      <div className="message">
        <h2 className="messageUser">{this.props.message.user}</h2>
      </div>
    );
  }
});
```
上記から下記に書き換えてみました。
「サンプル」というテキストを追加しています。
```
var MessageItem = React.createClass ({
  render: function() {
    return (
      <div className="message">
        <h2 className="messageUser">サンプル{this.props.message.user}</h2>
      </div>
    );
  }
});
```

![イメージ説明](fbb1a9fee22f219ed6faed3bdf0c744e.png)

その後、実際に動かしてみると、Postボタンをタップする前には
上記のスクショのようになっているところ、
Postボタンタップ後に下記のスクショのように
「サンプル」というテキストが表示されました。

![イメージ説明](7e4a1795703fab56f635b05b0af30f44.png)

これでMessageItemが呼び出されていることは分かったのですが、
投稿した内容が表示されないというのは
MessageItem内の{this.props.message.user}の部分に
データがうまく渡っていないのでしょうか。。。

とりとめのない追記で申し訳ありませんが、見ていただけると大変助かります。

###さらに追記 01/17
コメントにいただいたように、success:の中でconsole.log(message)を記載してchromeで確認をしました。

htmlが吐き出されているようで、かなり長いログになっていました。。
※あまりに長いので、一部省略しています。

```
<!DOCTYPE html>
<html>
  <head>
    <title>Ruby on Rails Tutorial Sample App</title>
    <link rel="stylesheet" media="all" href="/assets/account_activations.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />

中略

  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
  </script>
<![endif]-->

  </head>
  <body style="color: rgb(27, 29, 34)">
    <header class="navbar navbar-inverse">
  <div class="container" style="margin-top: 100px;">
    <a id="logo" href="/home">sample app</a>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="/home">Home</a></li>
        <li><a href="/help">Help</a></li>
          <li><a href="/users">Users</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              Account <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><a href="/users/103">Profile</a></li>
              <li><a href="#">Settings</a></li>
              <li class="divider"></li>
              <li>
                <a rel="nofollow" data-method="delete" href="/logout">Log out</a>
              </li>
            </ul>
          </li>
      </ul>
    </nav>
  </div>
</header>

    <div class="landing">
      <div class="alert alert-success">Micropost created!</div>
        <div class="container">
    <div class="row col-md-12">
      <h1>
        <section class="user_info">
          <a href="/users/103"><img alt="example_sample@example.com" class="gravatar" src="https://secure.gravatar.com/avatar/1a51ab8ceafa101e9b36619b6c9b277d?s=80" /></a>
<h1>example_sample@example.com</h1>
<span><a href="/users/103">view my profile</a></span>
<span>84 microposts</span>

          <div class="stats">
  <a href="/users/103/following">
    <a id="following" class="stat">
      1
      following
    </a>
  </a>
  <a href="/users/103/followers">
    <a id="followers" class="stat">
      0
      followers
    </a>
  </a>
      
中略
        </section>
        <div data-react-class="MessageBox" data-react-props="{}"></div>
      </div>
    </div>
  </div>

      <footer class="footer">
  <small>
    The <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
    by <a href="http://www.michaelhartl.com/">Michael Hartl</a>
  </small>
  <nav>
    <ul>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
      <li><a href="http://news.railstutorial.org/">News</a></li>
    </ul>
  </nav>
</footer>

      <pre class="debug_dump">--- !ruby/hash:ActionController::Parameters
controller: static_pages
action: home
</pre>
    </div>
  </body>
</html>
```

また、chromeのconsoleをみると、もう一つエラーが表示されていました。

```
micropost.self-560a548….js?body=1:19 undefined "parsererror" "SyntaxError: Unexpected token < in JSON at position 0"
```
コードの該当部分は、POSTのajax内のerror:、下記の部分のようです。

```
    console.error(this.props.url, status, err.toString());
```

よろしくお願いします。

###さらにさらに追記 1/17(2)
micropostsのcontrollerは下記のようになっています。

```
class MicropostsController < ApplicationController
  before_action :logged_in_user, only: [:create, :destroy, :show]
  before_action :set_micropost, only: [:destroy, :show]

  def create
    @micropost = current_user.microposts.build(micropost_params)
    if @micropost.save
      flash[:success] = "Micropost created!"
      redirect_to home_path
    else
      @feed_items = []
      render 'static_pages/home'
    end
  end

  def destroy
    @micropost.destroy
    flash[:success] = "Micropost deleted"
    redirect_to request.referrer || home_path
  end

  def show
    messages = Micropost.find(params[:id])
    render json: messages
  end

  private

    def micropost_params
      params.require(:micropost).permit(:content, :picture)
    end

    def set_micropost
      @micropost = current_user.microposts.find_by(id: params[:id])
      redirect_to home_path if @micropost.nil?
    end
end

```