浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【javascript・react】双方比較:オブジェクトの代入方法からjsonへの加工方法まで

今回はオブジェクトに値を追加してjsonに加工するまでの工程についてです。

javascriptとreactで追加方法がどう違うのか比べてみました。

両方ともよく使うので&夏ボケで最近物忘れが激しいという理由で

書きました。そのままコピペしても動くようにしてあるので

参考にどうぞ。

 

【例】↓

普通のjavascript


var obj = {};

obj['name'] = 'sakura';
obj['age'] = '17';

JSON.stringify(obj);

 

reactでstateを使ったオブジェクト操作


constructor(props) {
super(props);
this.state = {
new_object:{},
}
}

componentDidMount() {
this.state.new_object['name'] = 'yuri';
this.state.new_object['age'] = '16';
this.setState({ new_object: this.state.new_object });
}

render() {
var new_obj = JSON.stringify(this.state.new_object)
}

 

考え方はjavascriptと似たようなものです。

this.state.new_object[‘name’]でキーを生成・右辺には代入する値(value)

という構成になってます。

this.stateに直接代入できるとは思っていなかったので仰天でしたがその後に

すぐsetStateすることでrender内でもちゃんと使うことができました。

以上でオブジェクト操作の一連の流れは終了。お疲れ様でした。

オブジェクト操作はよく沼るのでこうやって定期的にメモしないと忘れるのです。

  • この記事いいね! (0)