Conversation
拡張性をあげるため
|
明日の午後からおそらく再開しますが、夕方までわからなかったらディスコードで泣きつくと思うので、お手すきの方は来ていただけると助かります。 |
データの管理方法を変更するため
それぞれのタスクでidを管理するように変更するため
| const newStatus = [...status]; | ||
| newStatus[index] = !newStatus[index]; | ||
| setStatus(newStatus); | ||
| const newStatus = [...todos]; |
There was a problem hiding this comment.
const newStatus = todos;
上記の書き方だとうまく動作しませんでしたが、理由はあんまりわかってないです。
There was a problem hiding this comment.
自分も原因分からないです...。
const をいじってるのが怪しい？とも思ったけど、変更は配列の中身なので問題ないし。
あえて言うなら、基本 const で定義しているように、React のスタイル？？は一度定義した変数を書き換えて使い回すのではなく、どんどん変更がある度に新しい変数に放り込んでいくので、そういう実装にしてみても良いかもしれません。
と言ってもここの場合だと、やるとしたらこんな感じ？であまり良い例＆実装ではありませんが。
const handleStatus = () => {
const newStatus = todos.map((todo: TodoType, i: number): TodoType => {
return i === index
? { id: todo.id, title: todo.title, isCompleted: !todo.isCompleted }
: todo;
});
setTodos(newStatus);
};
There was a problem hiding this comment.
ちょっと調べた感じだと、一般的にはslice()を使うみたいです（逆に今まで私どうやってたんだって感じですが）
[Qiita] ReactのsetStateで配列の一部を変更する
[Qiita]【React】Reactで便利な配列操作まとめ
There was a problem hiding this comment.
じゃあやっぱここはコピーが必要なのかな。
[...status] と status.slice() には何か違いあるのかな？
コピーの深さも同じ？気がするけど。
status.slice() の方が引数で範囲指定できる点で上位互換ってことかな。
mikiya1130
left a comment
mikiya1130
left a comment
There was a problem hiding this comment.
お疲れ様です。
全体的にはとても良くなったと思います。
自分からは1点だけ、よろしくお願いいたします。
src/conponents/TodoInput.tsx
Outdated
| const newStatus = [...status, false]; | ||
| const newTodos = [ | ||
| ...todos, | ||
| { id: String(todos.length), title: title, isCompleted: false }, |
There was a problem hiding this comment.
todos.length から map の key で使う id を生成すると、id が重複することがあります 😢
(例：末尾以外の Todo を削除 → Todo を新規追加)
タスク追加ごとにひたすらインクリメントのみしてく値を用意するなど、他に対策が必要そうです。
map の key 専用で、なんでもいいなら作成時のタイムスタンプや、場合によっては乱数でも問題ないかもだけど。
(動画は useEffect 追加してます。)
2021-10-10.20-55-36.mp4
There was a problem hiding this comment.
これ私が指示して書いてもらったんだけど、全然考慮できてなかった 🙄
There was a problem hiding this comment.
今回は「タスク追加ごとにひたすらインクリメントのみしてく値を用意する」というもので解消しました。
ご指摘ありがとうございました！
IDの設定方法を変更するため
| type TodoType = { | ||
| title: string; | ||
| }; | ||
| import TodoInput from '@/conponents/TodoInput'; |
| @@ -1,27 +1,23 @@ | |||
| import { Container } from '@chakra-ui/react'; | |||
| import React, { useState } from 'react'; | |||
| import { Container } from '@chakra-ui/react'; | ||
| import React, { useState } from 'react'; | ||
|
|
||
| import TodoInput from './conponents/TodoInput'; |
4 participants
拡張性をあげるため
🔨 Details of Changes
type TodoTypeにid、isCompletedパラメーターを追加initialTodosにid、isCompletedのデータを追加✅ Resolved Issues
🤝 Related Issues