如何在页面刷新时重新运行 useEffect 反应挂钩中的代码？

Question

我正在努力处理页面刷新后状态值被设置为“未定义”的问题。

在我的 useEffect 挂钩中，我生成了一个随机数以从数组中提取一个随机问题对象。 在第一次渲染时一切正常，但是当我刷新时一切都崩溃了因为我所期望的是未定义的值，因为 useEffect 只运行一次，因此通过 nextQuestion() 加载的值不会在刷新时重新运行。

（未捕获的类型错误：无法读取未定义的属性（读取“X”））
这是我在页面刷新后使用其中一个问题状态值的每一行代码中遇到的错误。

这是我的页面：

const Quiz_Play = () => {

    const {questions} = useContext(QuizContext) as IQuizContext; // get array of questions from contexts

    const [firstRender, setFirstRender] = useState(false);

    useEffect(() => {
        generateRandomNumber()
        nextQuestion()
        setFirstRender(true);
      }, [firstRender]);

    const [questionNum, setQuestionNum] = useState<number>(1)
    const [questionText, setQuestionText] = useState<string>("Which company developed this game?")
    const [questionImageId, setQuestionImageId] = useState<number>(21)
    const [questionOptions, setQuestionOptions] = useState<string[]>(["Activision", "Ubisoft", "Treyarch"])
    const [questionCorrect, setQuestionCorrect] = useState<string>("Treyarch")
    const [questionsAnswered, setQuestionsAnswered] = useState<number>(0);
    const [correctAnswers, setCorrectAnswers] = useState(0);

    const [random, setRandom] = useState<number>(0)

    const generateRandomNumber = () => {
        const rand = Math.floor(Math.random() * questions.length);
        console.log("rand num is " + rand)
        setRandom(rand)
    }
    
    const nextQuestion = () => {
        
        generateRandomNumber()

        const q = questions[random]

        console.log(q)
        setQuestionNum(questionsAnswered+1)
        setQuestionsAnswered(questionsAnswered)
        setQuestionImageId(q.gameId)
        setQuestionText(q.question)
        setQuestionOptions(q.options)
        setQuestionCorrect(q.correct)
    }
  
  return (
    <div>
        
        <Logo />

        <div className="wrapper">
            <h1 className="quizInfo_h1"> Question {questionNum} </h1>
            <h2 className="quizQuestion_h2 text-align-center">{questionText}</h2>
            <p className="correctCounter_p text-align-center no-margin "><span style={{color: '#f2c112'}}>{correctAnswers}</span>/{questionsAnswered}</p>
            
            <div className="quizImage">
                <Game_ById id={questionImageId}/>
            </div>

        </div>
        
        <div className="quiz-options">
            <Link to="/"><button className="btn small-med-btn quiz-option-btn" id="quiz-option-1">{questionOptions[0]}</button></Link>
            <Link to="/"><button className="btn small-med-btn quiz-option-btn" id="quiz-option-2">{questionOptions[1]}</button></Link>
            <Link to="/"><button className="btn small-med-btn quiz-option-btn" id="quiz-option-3">{questionOptions[2]}</button></Link>         
        </div>

        <p style={{marginTop: 10, color:"rgba(255, 255, 255, 0.5)"}} className="text-align-center">
            Don't want to play anymore? Feeling like a <Link to="/quiz" className="yellowlink">coward</Link>?
        </p>

        

    </div>
  );
}

export default Quiz_Play;

显然以下代码仅用于视觉表示，但我在想也许这样的事情可以解决我的问题？

 useEffect(() => {
        generateRandomNumber()
        nextQuestion()
      }, [onWindowRefresh]);

这样 useEffect 钩子就会运行其中的代码一次，而且如果页面刷新了。

我一直在搜索堆栈溢出和互联网，但没有占上风。我希望有更多经验的人能够为我指明正确的方向，让我从这里走向何方。

如果您想让我发布任何其他代码，请告诉我。或者，如果您需要某种额外的详细信息。非常感谢任何愿意花个人时间帮助我的人。

Answer 1

在useEffect依赖数组中添加questions，当问题列表变化时再次触发useEffect

useEffect(() => {

  if(questions.length > 0){
    generateRandomNumber()
    nextQuestion()
    setFirstRender(true);
  }
}, [firstRender, question]);