setState呼び出し時について

Question

初心者がweb上のコードを参考にしカスタマイズしておりますので、表現の仕方など違っていたら適宜読み替えてください。

下記のようなstateがあります。

		this.state = {
			male: {
				id: 0,
				name: 'male',
				num: 3,
				list: [
					{ id: 0, title: "title0" },
					{ id: 1, title: "title1" },
					{ id: 2, title: "title2" },
				]
			},
			female: {
				id: 1,
				name: 'female',
				num: 3,
				list: [
					{ id: 0, title: "title0" },
					{ id: 1, title: "title1" },
					{ id: 2, title: "title2" },
				]
			}
		};

setStateへ渡すhashのkeyの指定の仕方が知りたいです。（ここで問題なのはlistというkey）

		this.setState({
			list: [...this.state[gend].list, { id: id, title: title }],
		});

Answer 1

こんにちは

前後のコードを見ないと、はっきりしないところもありますが、以下のようになると思われます。

this.setState({ 
    [gend]: { 
        ...this.state[gend],
        list: [...this.state[gend].list, { id, title }]
    }
});

以下は、上記の setState を確認するサンプルです。

• **動作確認用サンプル： **https://codepen.io/jun68ykt/pen/eYOPVMQ?editors=0011

上記のサンプルでは、male および female それぞれの list の内容を表示し、追加ボタンをクリックすると、ランダムな id と　title を作成して、 maleまたはfemaleのlist に追加します。

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

Comments

[退会済みユーザー]

拙い説明に対し、解法を教示していただきましてありがとうございました。

[jun68ykt]

どういたしまして。解決したようでよかったです????