回答編集履歴
1
テキスト修正
answer
CHANGED
|
@@ -104,4 +104,68 @@
|
|
|
104
104
|
|
|
105
105
|
もし削除の要件が、冒頭に書いたようなものではない場合は、`<input>`で入力された文字列から、どのように削除されるアイテムが指定されるのか、コメントからお知らせください。
|
|
106
106
|
|
|
107
|
-
以上、参考になれば幸いです。
|
|
107
|
+
以上、参考になれば幸いです。
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
### 追記
|
|
111
|
+
|
|
112
|
+
コメントに回答します。
|
|
113
|
+
|
|
114
|
+
まず初めに、`components/Todo.js` の以下の部分
|
|
115
|
+
|
|
116
|
+
```JSX
|
|
117
|
+
// StoreのTodoからリストを生成
|
|
118
|
+
const list = this.props.todo.todoList.map((todo, index) => <li key={index}>{todo}</li>)
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
で `<li>` の `key` として配列のインデクスである `index` を渡していますが、これは実は推奨されない`key` の指定方法です。 Reactのドキュメントの [Lists and Keys](https://reactjs.org/docs/lists-and-keys.html) の下の方に、
|
|
122
|
+
|
|
123
|
+
```JSX
|
|
124
|
+
const todoItems = todos.map((todo, index) =>
|
|
125
|
+
// Only do this if items have no stable IDs
|
|
126
|
+
<li key={index}>
|
|
127
|
+
{todo.text}
|
|
128
|
+
</li>
|
|
129
|
+
);
|
|
130
|
+
```
|
|
131
|
+
というコード例に対して
|
|
132
|
+
|
|
133
|
+
> We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state.
|
|
134
|
+
|
|
135
|
+
と書かれています。将来、ご質問上げられているコードの `todoList` も、要素の順序を入れ替える機能を追加したくなるかもしれません。なので、まず `todoList` を単純な文字列の配列ではなく、以下のような形式のオブジェクトの配列にします。
|
|
136
|
+
|
|
137
|
+
```javascript
|
|
138
|
+
{
|
|
139
|
+
id: 10, /* 1ずつ増える整数 */
|
|
140
|
+
todo: "コードを書く", /* 文字列 */
|
|
141
|
+
}
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
このように、`todoList`の要素を拡張したのち、
|
|
145
|
+
|
|
146
|
+
- IDを特定して、そのIDを持つ要素を配列から削除するアクションとリデューサー内の処理の追加
|
|
147
|
+
- 適宜、各ToDoアイテムごとの１件削除を行うUIを追加
|
|
148
|
+
|
|
149
|
+
という修正を行います。
|
|
150
|
+
|
|
151
|
+
さきほど挙げた[レポジトリ](https://github.com/jun68ykt/q187745)では、順に、以下の３点のコミットでこれらを行いました。（cloneしたのであれば pull してください）
|
|
152
|
+
|
|
153
|
+
- [配列要素に一意のIDを追加](https://github.com/jun68ykt/q187745/commit/bab38a5e6496ed5225e72efe4810bc621e30dbb7)
|
|
154
|
+
|
|
155
|
+
- [各ToDoアイテムごとの削除ボタン追加](https://github.com/jun68ykt/q187745/commit/9ef29d0e87d0521b23a17e3c2045aa564c94221a)
|
|
156
|
+
|
|
157
|
+
- [各Todoアイテム削除時の処理追加](https://github.com/jun68ykt/q187745/commit/58784d9e15b5c652815279303de1884bac6e19ed)
|
|
158
|
+
|
|
159
|
+
|
|
160
|
+
以下は、現時点のものを実行して、`foo`, `bar`, `baz` とアイテムを追加していったときの表示です。
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
ちなみに、 id を 9001 始まりにしているのは特に意味はありませんが、**配列のインデクスではない** ことを明確にするために 0 始まりではない数字にしてみたという意図です。
|
|
166
|
+
|
|
167
|
+
上記の状態から `bar` の左側にある削除ボタンをクリックすると、リストから `bar` が削除され、以下のようになります。
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
以上です。何か不明な点あれば、またコメントください。
|