React 非同期 crud処理

Question

前提・実現したいこと

Reactの非同期処理について学習中です。シンプルなCRUD機能を実装しようと思い、非同期で新規作成（POST)一覧表示（GET)をRails-apiの環境で作成しております。

発生している問題・エラーメッセージ

非同期処理のタイミングが上手く行きません。
具体的には、postしたい内容をinputに入力し、create処理が走るのですが、buttonを二回押さないと発火しません。
というより、発火自体はするのですが、createとgetの処理が一回ずつずれております。下記ごご覧ください。
https://gyazo.com/982624c800aab88a96f3a2a61193fd89
ご覧の通り、テキストを入力するイベントと、postアクションを呼び出すクリックイベントがどちらも、次のイベントが発火した時に一つ前の処理が行われるかたちになっていると思います。

該当のソースコード

import React from "react"
class IndexComponent extends React.Component {
  constructor(){
    super()
    this.state = {
      users: [],
      name: '',
      post: ''
    }
  }

  handleinputChange = (e) => {
    this.setState({[e.target.name]:e.target.value})
    console.log(this.state)
  }

  createPostRequest = () => {
    fetch('http://localhost:3000/users', {
      method: 'post',
      body: JSON.stringify(this.state),
      headers: {
        'Content-Type': 'application/json'
      },
    })
    .then(this.fetchIndex())
  }

  componentDidMount = () => {
    this.fetchIndex()
  }

  fetchIndex= () => {
    fetch("http://localhost:3000/users") // データを取得しに行く
    .then( res => res.json() ) // json型のレスポンスをオブジェクトに変換する
    .then( res => { // オブジェクトに変換したレスポンスを受け取り、
      this.setState({ users: res }) // Stateを更新する
    })
  }

  render() {
    const { users, name, post } = this.state;
      return (
        <div>
          <ul>
            {users.map(user => (
              <li key={user.id}>
                {user.id} {user.name} {user.post}
              </li>
            ))}
          </ul>
          <p>name</p>
          <input 
            type='text'
            name='name'
            value={name}
            onChange={this.handleinputChange}
          />
          <p>post</p>
          <input 
            type='text'
            name='post' 
            value={post}
            onChange={this.handleinputChange}
          />
          <button id="submit" onClick={this.createPostRequest}>submit</button>
        </div>
      );
  }
}

export default IndexComponent;

  def index
    @users = User.all
    render json: @users
  end

  def create
    @user = User.create(user_params)
    render json: @user
  end

以上です。

目標としては、button押下時に一覧が更新するという処理を行いたいです。
ご存知の方いらっしゃいましたら、お力添えいただけると大変嬉しいです。

Answer 1

.then(this.fetchIndex()) thenに渡すときに実行してしまっています。
()を削除してみてください。

Comments

[Shika_Tech]

コメントありがとうございます！そしてお返事おそくなり大変申し訳ございません。
今回は this.(() => this.fetchIndex())とすることで解決しました！