-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ToDoのstate管理方法の変更 #17
base: main
Are you sure you want to change the base?
Conversation
拡張性をあげるため
明日の午後からおそらく再開しますが、夕方までわからなかったらディスコードで泣きつくと思うので、お手すきの方は来ていただけると助かります。 |
データの管理方法を変更するため
それぞれのタスクでidを管理するように変更するため
const newStatus = [...status]; | ||
newStatus[index] = !newStatus[index]; | ||
setStatus(newStatus); | ||
const newStatus = [...todos]; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const newStatus = todos;
上記の書き方だとうまく動作しませんでしたが、理由はあんまりわかってないです。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
自分も原因分からないです...。
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ちょっと調べた感じだと、一般的にはslice()
を使うみたいです(逆に今まで私どうやってたんだって感じですが)
[Qiita] ReactのsetStateで配列の一部を変更する
[Qiita]【React】Reactで便利な配列操作まとめ
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
じゃあやっぱここはコピーが必要なのかな。
[...status]
と status.slice()
には何か違いあるのかな?
コピーの深さも同じ?気がするけど。
status.slice()
の方が引数で範囲指定できる点で上位互換ってことかな。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
お疲れ様です。
全体的にはとても良くなったと思います。
自分からは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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
これ私が指示して書いてもらったんだけど、全然考慮できてなかった 🙄
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
今回は「タスク追加ごとにひたすらインクリメントのみしてく値を用意する」というもので解消しました。
ご指摘ありがとうございました!
IDの設定方法を変更するため
type TodoType = { | ||
title: string; | ||
}; | ||
import TodoInput from '@/conponents/TodoInput'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
素敵です!
@@ -1,27 +1,23 @@ | |||
import { Container } from '@chakra-ui/react'; | |||
import React, { useState } from 'react'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
良いコードですね!
@@ -1,27 +1,23 @@ | |||
import { Container } from '@chakra-ui/react'; | |||
import React, { useState } from 'react'; | |||
|
|||
import TodoInput from './conponents/TodoInput'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
素敵なコードですね!
拡張性をあげるため
🔨 Details of Changes
type TodoType
にid
、isCompleted
パラメーターを追加initialTodos
にid
、isCompleted
のデータを追加✅ Resolved Issues
🤝 Related Issues