【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内でもちゃんと使うことができました。

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

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