まず大前提としてこのwebアプリがSPAであるということ。
ページの遷移がないのでロードされたコンポーネントは生き続けている。
1.復習テストを行う⇨次のカードを表示するを複数回押した時に同じカードが出てきてしまうことがある。
ここでshuffledArray
を生成してシャッフルしているが、これはuseStateの変数が反応する度にこのコードが走るので、何回もシャッフルされる。ので、後に使っているtestIndexが意味をなさない、なので同じカードが出る可能性が出てくる。
(更に言うとLocalStorageのcardsというitemがないという場合は考慮されてない)
2.同じく複数回押したときに以下のエラーコードが返される
ここで、インデックス外ならボタンの非表示はしているが、その後も別のカードをインデックス外からアクセスしようとするので、カードがない。newCard
がundefined
で渡すことになるので、id
がないという表示になる。
単純にはelseを追加で回避できそうだけど、それ以前に構造的にうまく動いてない気はする。
(「次のカードを表示する」を押した後に、次となるインデックスがあるかどうかを判断して、次のカードがないなら、この時点でボタンを非表示にすべきだとは思う。今は次があるかどうかをとにかく押させてから判断してる。)
最初に言ったようにSPAなのでコンポーネントが取り除かれない限り生き続けているので、testIndex
は常に増えて行っており、1に初期化されるのは表示されたその時だけ。
全体的にsetCards
を上の階層から使いまわしたり、色々まずいところが多いのでどこから初めて良いのか分からないが、少なくともreducerとかimmerとか使ったほうが処理か簡素化出来る気がする。