[React] formと上手く付き合えない！

#はじめに
私の質問を見ていただいてありがとうございます。

React初心者です。
練習としてTodoアプリを作ってみました。
そこで疑問に思ったことがあります。

質問に答えていただけたら幸いです。

#［Q.1］formを作成すれば、stateをもつコンポーネントが増える？

・親コンポーネントでstate管理。（一極集中でデータを管理）
・子コンポーネントではpropsでデータを受けて表示させる。（あくまでデータの受け皿として、受けたデータを反映させるのみ）

私は書籍や記事から上記のように書くことが望ましいと理解しました。

しかし、子コンポーネントのformを作成すると親コンポーネントのstateを変更するためにstateを持つ子コンポーネントのformを増やさなければなりません。

####form作成のたびにstateを作成してバラけるのは、仕方がないことでしょうか？また、解決方法は、ありますか？

#［Q.2］配列へのデータの追加方法として最適な方法は？

現在は、下記のように配列に追加をしてます。

js
1// 初期値は、  objects: []
2const newObject = this.state.objects.slice();
3
4newObjet.push({
5 objectContent: newObjectContent
6});
7
8this.state({ newObject });

####他に配列へのデータ追加方法にいい方法があれば教えて頂きたいです。

#［Q.3］stateの初期値はカラの配列にして、formのnameでデータの種類を分けるのが良い？

stateの初期値は空っぽの配列にして、formのnameで指定したデータをevent.target.***.valueで取得し、定数の中に入れて、それを.push()で追加、setStateしていました。

####初期値の配列を入れ子にする方がいいですか？？
下記のような書き方です。
以前これでコードを書こうとしましたが、これだと配列の中身の取り出し方が難しく現在の手法にしました。

js
1this.state = {
2 objects: [
3  {id: "", content: ""}
4 ]
5}

#最後に
最後まで読んでくださってありがとうございます。
質問の仕方もわかりにくかったり、間違っているかもしれませんが、ご回答宜しくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

以下にて、各質問に順に回答していきます。

［Q.1］formを作成すれば、stateをもつコンポーネントが増える？

・親コンポーネントでstate管理。（一極集中でデータを管理）
・子コンポーネントではpropsでデータを受けて表示させる。（あくまでデータの受け皿として、受けたデータを反映させるのみ）

私は書籍や記事から上記のように書くことが望ましいと理解しました。

はい。その理解で概ね問題ないです。

form作成のたびにstateを作成してバラけるのは、仕方がないことでしょうか？また、解決方法は、ありますか？

については、

入力フォームとなる子コンポーネントにstateを持たせずに、
親コンポーネントのstateに子であるフォームからの入力値を持たせ、
フォームに配置される（<input />や<textarea />などの）入力要素のonChangeハンドラを親のメソッドとして持たせ、子にprops経由で渡す

ことで解決できます。

例としては、ひとつ後のご質問に対する私からの回答として挙げたコードでは、入力フォームとなるTodoInputを、stateを持たないFunctional Component にしています。

方針としては、

stateはなるべく親コンポーネントのほうに寄せ、子コンポーネントは表示やユーザー入力を受け取るだけのもの（Presentational Component）とする。親コンポーネントは、そのような子コンポーネントを一つ以上含む、入れ物(Container Component)と考える

ようにします。そうすると、

親側のほうに Class Component が集まり、枝葉に行くほど Functional Componentが多くなる(はず）

ということになります。

参考までに、以下は、Presentational ComponentとContainer Component、および Functional ComponentとClass Component の説明として検索上位に出てくる記事です。（すでにお読みになっていたら、すみません。）

Presentational and Container Components

React Functional or Class Components: Everything you need to know

［Q.2］配列へのデータの追加方法として最適な方法は？

たとえば、以下のようなstate

javascript
1this.state = { tasks: [] }

があったときに、this.state.tasks の先頭に newTask を追加した配列で setState するには

javascript
1this.setState({ tasks: [newTask, ...this.state.tasks] });

とすればよいです。
ひとつ後のご質問に対する私からの回答のコードでも、以下にてこれを使っています。

jun68ykt/q167369/blob/master/src/index.js#L64-L65

ちなみに末尾に追加であれば、以下です。

javascript
1this.setState({ tasks: [...this.state.tasks, newTask] });

...によるスプレッド構文は、配列およびオブジェクトの展開ともに、現在のstateから次のstateを作るときによく使います。ひとつ後のご質問に対する私からの回答のコードで、オブジェクトに対して ...を使って setStateしている部分が以下です。

jun68ykt/q167369/blob/master/src/index.js#L54-L56

［Q.3］stateの初期値はカラの配列にして、formのnameでデータの種類を分けるのが良い？

空の配列でよいと思います。

javascript
1this.state = {
2 objects: [
3  {id: "", content: ""},
4 ]
5}

の考え方だと、ひとつ後のご質問の App のstate も

javascript
1this.state = {
2  tasks: [
3    { title: "", description: "" },
4  ]
5}

のようになり、このtasksの末尾の要素 { title: "", description: "" } をフォームからの入力に紐づけようという意図だったものと思いますが、ちょっと分かりにくいコードになってしまうかなと思います。フォームからの入力は、state の中の別プロパティに持たせたほうが分かりやすいです。なので