React＋Reduxでデータベースに保存していた内容を更新する時方法

Question

初めて投稿します。
まだ勉強中の身ゆえ、考え方間違っていたら、申し訳ないです。

現在React + Reduxで予めデータベースに保存済みの情報をformの各inputのvalueにpropsで表示しています。

今回やりたいことは、データベースの更新時の動作です。

例えば、全てのInputが更新される場合は、よくあるonChangeメソッドを定義すれば、実際にデータベースに値を送るときにthis.stateの内容を送るデータとして使えますが、もし、特定のinputのみデータが変更され、他のinputは変更されない場合は何もしてない方のinputに対してはもちろんonChangeが発火しないので、この方法だとnullの状態で送信してしまいます。

前提・実現したいこと

そこで、inputのvalueを、propsから引っ張ってきたデータで表示しつつ、もし、valueが変更されない場合は、変更してないvalueをstateにセットしたいのですが、どのような方法が最適なのでしょうか？

以下のソースコードの場合ですと、inputのnameがnameは変更せずに、ユーザーはnicknameのみを変更したとします。

すると挙動が、{name: null, nickname: atarashi-nickname}となります。

よろしくご教授お願いします。

該当のソースコード

class Formdesu extends Component{
  constructor(props){
    super(props);

    this.state = {name: null, nickname: null};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  // このメソッドは変更が加えられ場合にのみステートを変更出来る
  handleChange(e) {
      this.setState({ [e.target.name]: e.target.value});
  }

  handleSubmit(e) {
    e.preventDefault();

    const data = JSON.stringfy(this.state);

    // 以下　post...
  }

  render(){
    <form onSubmit={this.handleSubmit}>
      <input name="name" value={this.props.default_data[0]['namae'] onChange={this.handleChange}>
      <input name="nickname" value={this.props.default_data[0]['nickname'] onChange={this.handleChange}>
    </form>
  }
}

Answer 1

こんにちは

ご質問にあるコードを拝読しますと、入力された　name や nickname の値は、redux の state に保存されるわけではなく、 フォームコンポーネントのthis.state に入れておくようですので、いったん Redux の利用は検討から外しました。

その上で、ご質問のような、フォームからの入力によって変更されたものだけをサーバーに送りたい場合は、サーバーから受け取った時点での値を、編集中の値とは別に保持しておけばよいかと思います。具体的には、フォームコンポーネントの this.state の初期値を

    this.state = {
      orig: { name: '',  nickname: '' },
      form: { name: '',  nickname: '' }
    };

のように作っておいて、 orig のほうはサーバーから受け取った値を入れたらその後は変更しないでおきます。 form のほうはユーザーの入力値で変更していきます。これによって、変更後と変更前を比較することができるようになります。

以下は上記を使用したサンプルです。

<div id="app"></div>

class Form  extends React.Component {
  constructor(props) {
    super(props);
        
    this.state = {
      orig: { name: '',  nickname: '' },
      form: { name: '',  nickname: '' }
    };
    
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  componentDidMount() {
    fetch('https://demo2746340.mockable.io/q204849')
      .then(res => res.json())
      .then(data => { 
        this.setState({ orig: {...data}, form: {...data}}); 
      });
  }

  handleChange(e) {
      const form = { ...this.state.form, [e.target.name]: e.target.value };
      this.setState({ form });
  }
  
  handleSubmit(e) {
    // 変更されているパラメータを持つオブジェクトを作成
    const { form, orig } = this.state;
    const params = _.omitBy(form, (v, k) => orig[k] === v);

    alert(JSON.stringify(params));
  }
  
  unchanged() {
    const { form, orig } = this.state;
    return ['name', 'nickname'].every(k => form[k] === orig[k]);
  }
  
  render() {
    const { name, nickname } = this.state.form;
    return (
      <div className="container">
        <p>name:&nbsp;
          <input name="name" value={name} onChange={this.handleChange} />
        </p>
        <p>nickname:&nbsp;
          <input name="nickname" value={nickname} onChange={this.handleChange} />
        </p>
        <p>
          <button onClick={this.handleSubmit} disabled={this.unchanged()}>送信</button>
        </p>
      </div>
    );
  }
}


ReactDOM.render(<Form />, document.querySelector("#app"));

上記のコードを、jsFiddle にも上げておきました。

• 動作確認用： https://jsfiddle.net/jun68ykt/p8qL3bcs/3/

このサンプルでは、

• componentDidMount の中で、現在のDBに保存されている値を取ってくる想定で、APIのダミーを fetch して、そのレスポンスを冒頭に書いたような形で、 setStateします。
• サーバーから取ってきた元の値から変更がないときは、[送信]ボタンを disabled にします。
• [送信]ボタンが押されたとき、変更されたプロパティのみを持つオブジェクトを(lodash の omitBy を使って）作成し、これをJSONにして alert で表示させています。

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

Comments

[退会済みユーザー]

お教えいただいた比較する方法で無事できました。ありがとうございました。

[jun68ykt]

どういたしまして。
> 無事できました。
とのことで、よかったです ????

[退会済みユーザー]

はい。勉強になりました????
また、何かあったらよろしくお願いします????

Answer 2

componentDidMount などでサーバーのAPIを叩いて編集対象のレコードを取得し、初期値としてセットすれば良いと思います。