usestateで非同期でsetされる変数を読み取れない場合の対処方法を知りたい。

Question

前提

react×TSでクイズアプリを作っています。
ランダムでクイズを選択肢、それをクイズリストに追加していきたいのですが、上手く追加できずに困っています。

実現したいこと

• setQuizeez();後のsetQuestion()の際に、quizListの値が参照できるようにしたい。

発生している問題・エラーメッセージ

setQuizeez()によって、quizListにクイズが追加されたのち、setQuestion()が実行できるとよいのですが、setQuizList()が非同期で走ってしまうため、上手くQuizListの値が参照できません。
このような場合、どのような対処方法が良いのでしょうか。

該当のソースコード

import React, { ChangeEvent, useEffect, useState } from "react";
import { quizzes, Quiz } from "../data/quizzes";

export type GameSceneProps = {
  setScene: (scene: string) => void;
};

export const GameScene: React.FC<GameSceneProps> = ({ setScene }) => {
  const [quizProgress, setQuizProgress] = useState<number>(1);
  const [inputAnswer, setInputAnswer] = useState<string>("");
  const [inputCheck, setinputCheck] = useState<string>("");
  const [question, setQuestion] = useState<string>("");
  const [answer, setAnswer] = useState<string>("");
  const questinoNum = 3;
  const [quizList, setQuizList] = useState<Quiz[]>([]);

  const randomNumber = (max: number) => {
    return Math.floor(Math.random() * max);
  };

  const setQuizeez = () => {
    const max = quizzes.length;
    console.log(quizList);
    for (let i = 0; i < questinoNum; i++) {
      console.log(quizzes[randomNumber(max)]);
      setQuizList([...quizList, quizzes[randomNumber(max)]]);
    }
    console.log(quizList);
  };

  const onchangeText = (e: ChangeEvent<HTMLInputElement>) => {
    setInputAnswer(e.target.value);
  };

  const submitAnswer = () => {
    console.log(inputAnswer);
    console.log(answer);
    if (inputAnswer == answer) {
      setQuizProgress((count) => count + 1);
      setinputCheck("");
      console.log(quizProgress);
      console.log(quizList);
      setQuestion(quizList[quizProgress - 1]["question"]);
      setAnswer(quizList[quizProgress - 1]["answer"]);
    } else {
      setinputCheck("違うよ！");
    }
    setInputAnswer("");
  };

  useEffect(() => {
    console.log(quizList);
    setQuizeez();
    setQuestion(quizList[quizProgress - 1]["question"]);
    setAnswer(quizList[quizProgress - 1]["answer"]);
  }, []);

  useEffect(() => {
    if (quizProgress === 4) {
      setScene("result");
    }
  }, [quizProgress]);

試したこと

以下のように、quizListが更新された際に、setQuestion()が動作するように変更した。
しかし、そもそもsetQuizeez()の中で、quizListが更新されない状態で、for文が回っているのでquestionNum=3の場合は3回目のquizzes[randomNumber(max)]がsetQuizListに収納された状態になってしまう。（本来はクイズが3問収納されて欲しい）

  const setQuizeez = () => {
    const max = quizzes.length;
    for (let i = 0; i < questinoNum; i++) {
      console.log(quizzes[randomNumber(max)]);
      setQuizList([...quizList, quizzes[randomNumber(max)]]);
    }
  };

  useEffect(() => {
    console.log(quizList);
    setQuizeez();
  }, []);

  useEffect(() => {
    if (quizList.length !== 0) {
      setQuestion(quizList[quizProgress - 1]["question"]);
      setAnswer(quizList[quizProgress - 1]["answer"]);
    }
  }, [quizList]);

追記①

以下のコードで実行したところ、setQuizeez()が2回実行され、配列に6つの要素が格納されてしまします。
setQuizeezは1度しか動かない認識ですが、なぜこのようなことが起こるのでしょうか？（開発環境のみuseeffectが2回動くようになっているみたいなのを見かけましたが、それが原因でしょうか？）

また、2回動くのはまだ分かるのですが、以下のコードにし、consoleを確認すると、ランダムで選出されたクイズ6つと、配列に格納されているクイズ6つが一致していないのですが、これはなぜでしょうか？

  const setQuizeez = () => {
    const max = quizzes.length;
    for (let i = 0; i < questinoNum; i++) {
      var _q = quizzes[randomNumber(max)];
      console.log(_q);
      setQuizList((quizList) => [...quizList, _q]);
      // setQuizList((quizList) => [...quizList, quizzes[randomNumber(max)]]);
    }
  };

Comments

[hoshi-takanori]

for 文の中で毎回 setQuizList するのが間違い。ローカル変数で配列を作ってそこに 3 つ追加して、最後に一回だけ setQuizList すると良いでしょう。

[hashikunmaru]

ありがとうございます。
最後にまとめてsetするのが良いのですね！

[maisumakun]

> ランダムで選出されたクイズ6つと、配列に格納されているクイズ6つが一致していないのですが

どれが抽出されたかは一致しています。

Answer 1

そもそもsetQuizeez()の中で、quizListが更新されない状態で、for文が回っているので

もとの値を使って書き換える場合、古い値を引数にとって新しい値を返す関数をsetに渡してください。

setQuizList(oldList => [...oldList, quizzes[randomNumber(max)]]);