Reactで配列の中身を一定時間おきに表示させるのをループしたい！！

Question

実現したいこと

現在、Reactでボタンを押したら配列の中身の文字列をsetIntervalを使ってループさせて表示し、再度、ボタンをクリックしたらループを終了させるという処理のルーレットのようなものを作っております。

例えば、

const array = ["おはよう"、"こんにちは",　"こんばんは",　"ありがとう"]

の配列があるとします。

これをとあるボタンをクリックしたらn秒ごとにおはようから順番に表示が切り替えられ、再度、ボタンをクリックしたらループを終了させて配列のどれか一つを表示させるという処理です。

現在の状況とコード

配列をループさせ、表示することはできたのですが、ボタンをクリックしてsetIntevalをストップ、リスタートさせる処理ができません。

import { useEffect, useState } from "react";

export const Roulette = () => {

  const [array, setArray] = useState(["おはよう"、"こんにちは",　"こんばんは",　"ありがとう"]);
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      if (count < array.length - 1) {
        setCount(count + 1);
      } else if (count == array.length - 1) {
        setCount(0);
      }
    }, 1000);
    return () => clearInterval(interval);
  }, [count]);

  return (
      <p >{array}[count]}</p>
  );
};

色々調べて<butto>タグやocClickイベントなども実際に書いてみたのですが、いまいちうまくいくものが見つけられませんでした。
どのようにすれば実現することが可能でしょうか？

ご教授いただけますと、幸いです。

Answer 1

useEffectの引数で[count]と書く、ということは、「countが変わるたびにタイマーをリセットする」という意味になってしまいます。

関数で更新を行うことで、countを依存関係から外しましょう。

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(oldCount => {
        if (oldCount < array.length - 1) return oldCount + 1;
        return 0;
      });
    }, 1000);
    return () => clearInterval(interval);
  }, [array.length]);

Comments

[lep-kop]

ご回答ありがとうございます！

今回、実装したい内容としては<button>タグを作り、クリックしたらsetIntervalのループを止めたり、動かしたりしてルーレットのようなものを作りたいです。

教えていただいた内容や僕が質問した箇所のコードだと、setIntervalを止めたり、動かすことができません。

どのような関数やメソッドを書けば良いのでしょうか？

そもそも、今回の実装内容的にsetIntervalを使うのは間違っていますか？