解決したいこと

・Home画面で、各投稿にユーザ名を表示させたい
今回viewはReactで実装しています。RailsはAPIモードを使用して実装を進めています。

調べたこと

・ユーザと投稿を紐づける必要がある

Articlesテーブルにuser_idカラムを追加した
Articleモデルには belongs_to :user Userモデルには has_many :articles を記述
UsersコントローラーではArticle.where やArticlesコントローラーではUser.find_by が使えるので、紐付けはうまく行ったと思う

・Railsでviewを作る場合には

<% @articles.each do |article| %>
  <%= article.user.name %>
<% end %>

このようにすれば投稿に紐づくユーザ名が取得できる

わからないこと

Railsでviewを作る際には上記の方法で取得できることはわかったのですが、今回はRailsはAPIモードで、JSONを返すようにしています。
なので、

<% @articles.each do |article| %>
  <%= article.user.name %>
<% end %>

と同じように表示させることができません。

Home画面では、全ての投稿を表示させている状態です。（参考： Qiita やZenn のTOPページ）
Homeは、articles#indexに飛ばすようにルーティングをしています。

# articles_controller
def index
  articles = Article.all
  render json: {
    articles: articles
  }, status: :ok
end

動作を確認するにあたり、簡単ではありますが3名のユーザと、それに紐づく投稿を24件作成しています。

# seed.rb
3.times do |n|
  user = User.new(
    name: "user_#{n}",
    email: "example#{n}@example.com"
  )

  8.times do |m|
    user.articles.build(
      title: "title#{m}",
      content: "aaaaaaaaaaaaaaaaaaaaaaaaa"
    )
  end

  user.save!
end

React側はこのようにしています。投稿者:{article.user_id} としている部分で名前を表示させたいです。

<ul>
  { articles.map( article => (
    <li key={article.id}>
      <h3>{ article.title }</h3>
      <p>{ replaceCreatedAt(article.created_at) }</p>
      <p>投稿者:{article.user_id}</p>
      <div>{ article.content }</div>
    </li>
   ))}
</ul>