[React.js]stateが正常にsetされない。

Question

前提・実現したいこと

現在React.jsでテキストのCRUDを実装しています。
投稿したデータはaxiosを使ってrailsサーバーのデータベースに保存されます。

投稿されたテキストを後から編集する機能を実装する際に、stateがうまく反映されず困っています。。。
handleSubmit内でsetStateをしているのですが、stateの内容が変更されていません。

該当のソースコード

import React, { Component } from 'react';
import update from 'react-addons-update';
import axios from 'axios';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';

class Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      post: {},
      title: '',
      content: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleContentChange = this.handleContentChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  componentDidMount() {
    axios
      .get(`http://192.168.99.100:3001/api/v1/posts/${this.props.match.params.id}`)
      .then((results) => {
        console.log(results);
        this.setState({ post: results.data, title: results.data.title, content: results.data.content});
      })
      .catch((data) =>{
        console.log(data);
        return(<h1>not found(404)</h1>);
      });
  }

  handleChange = title => event => {
    this.setState({title: event.target.value});
  };
  
  handleContentChange = content => event => {
    this.setState({content: event.target.value});
  };

  handleSubmit = () => {
    const titleUpdate = update(this.state.post, {title: {$set: this.state.title}})
    console.log('title update')
    console.log(titleUpdate)

    const contentUpdate = update(titleUpdate, {content: {$set: this.state.content}})
    console.log('content update')
    console.log(contentUpdate)

    this.setState({post: contentUpdate})
    console.log('state set')
    console.log(this.state.post)

    console.log('this post id')
    console.log(this.props.match.params.id)

    this.props.updatePost(this.props.match.params.id, this.state.post)
  }

  render(){
    return (
      <div>
        <form noValidate autoComplete="off">
          <TextField
            id="standard-full-width"
            label="Title"
            onChange={this.handleChange('title')}
            fullWidth
            margin="normal"
            variant="outlined"
            value={this.state.title}
          />
          <hr />
          <br />
          <TextField
            id="outlined-multiline-static"
            label="Content"
            multiline
            rows="30"
            fullWidth
            onChange={this.handleContentChange('content')}
            margin="normal"
            variant="outlined"
            value={this.state.content}
          />
        </form>
        <Button variant="contained" onClick={this.handleSubmit}>
          submit
        </Button>
      </div>
    );
  }
}

export default Form;

"this.props.updatePost"は投稿したデータを更新するメソッドです

試したこと

コンソールに逐一出力して値を確認してみたところ、"titleUpdate",#contentUpdate"は正常に定義されているようなのですが、setStateしてもPostが変更されていないようです。

補足情報（FW/ツールのバージョンなど）

react: 16.9.0
react-addons-update: 15.6.2
material-ui: 4.4.0

Answer 1

こんにちは

ご質問に挙げられているソースコードの以下の部分（※console.logは省略しました。）

修正前：

this.setState({post: contentUpdate})

this.props.updatePost(this.props.match.params.id, this.state.post)

で、 updatePost は this.setState によって this.state の内容が変更された後に呼ばれることを意図しているものと思われますが、この前後関係を担保するには、setState の第2引数にコールバックを与えて、そこで(変更後想定の） this.stateを使うコードを書けばよいかと思います。

したがって、以下のように修正してみると、いかがでしょうか？

修正後：

this.setState(
  { post: contentUpdate },
  () => {  
    this.props.updatePost(this.props.match.params.id, this.state.post)
  }
)

以下もご参考まで

• react公式ドキュメントの setState　の説明からの引用：

setState(object nextState[, function callback])

・・・ In addition, you can supply an optional callback function that is executed once setState is completed and the component is re-rendered.

• stackoverflow: When to use React setState callback の回答

Comments

[wisheebell]

なるほど。
そのような書き方もできるんですね
参考になります

Answer 2

this.setStateは非同期で実行されますので、直後の行ではまだstateは変更されません。

stateを参照せずに、変更に使った値をそのまま使うようにしましょう。

Comments

[wisheebell]

ありがとうございます
解決しました