当页面刷新时，我如何使代码在我的useEffect反应钩子重新运行?

Question

我正在努力在页面刷新后将状态值设置为'未定义'。

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

(Uncaught TypeError: Cannot read properties of undefined (reading '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]);