加载页面时 useEffect() 出现问题

Question

我的反应测验应用程序遇到问题。以下是描述： 这是来自应用程序.js文件：

...
const [createQuiz, setCreateQuiz] = useState(false);
...
useEffect(()=> {
const reRender = () => {
setCreateQuiz(true)
}
window.onload=function(){
document.getElementById("myBtn").addEventListener("click", reRender);
} 
// return document.getElementById("myBtn").removeEventListener("click", reRender);
}, [createQuiz])
return (
<QuizContextProvider>
{
(createQuiz) ? (
<div>Form</div>
) : (
<div>
<Modal/>
<Question question={questions[questionNumber]} next={goToTheNext} />
</div>
)
}
{console.log(createQuiz)}
</QuizContextProvider>
);
}

可以看出，这是一个条件渲染：模态窗口询问用户是要参加现有测验还是创建自己的测验，当用户单击"创建自己的"按钮时，应用程序应该再次重新渲染，这次useEffect(((在App.js中(将createQuiz的值设置为true。下面的代码摘录来自<Modal />组件：

return (
<div className='benclosing' style={{display:displayValue}}>
<div className='modal'>
<h1>Welcome!</h1>
<p>Do you want to take an existing quiz or create your own?</p>
<button onClick={hideWindow} >Existing quiz</button>
<button id='myBtn'>Create your own</button>
</div>
</div>
)
}

Everthing按预期工作正常，除了1：每当单击重新加载图标时，我的页面都会重新呈现，并再次询问用户是否要参加现有测验。我希望这种清爽不会影响任何东西。我被这个问题困住了。如何达到预期的效果？

我也试过这个：

const reRender = () => {
setCreateQuiz(true)
}
useEffect(()=> {
reRender()
//return setCreateQuiz(false)
}, [createQuiz])

它没有按预期工作。我在对红男爵的第二条评论中描述了它造成的原因，请看一下。

Answer 1

实现所需目标的正确方法是在App组件内创建一个事件处理程序，该处理程序将createQuiz设置为在Modal组件内单击Create your own按钮时true。

function App() {
const [createQuiz, setCreateQuiz] = React.useState(false);
const handleShowQuizForm = () => {
setCreateQuiz(true);
};
return (
<div>
{createQuiz ? (
<div>Form</div>
) : (
<>
<Modal showQuizForm={handleShowQuizForm} />
</>
)}
</div>
);
}
function Modal(props) {
return (
<div>
<button type="button" onClick={props.showQuizForm}>
Create your own
</button>
</div>
);
}

下面是一个示例：

• 代码沙盒

这里不需要useEffect钩子，window.onload事件向我暗示您希望将createQuiz设置为true然后"刷新"您的页面并期望createQuiz现在true- 它不会那样工作。

此外，您使用useEffect钩子的方式可能会有问题 - 您应该尽量避免更新useEffect钩子内部的一段state，这也是dependency array的一部分：

React.useEffect(() => {
const reRender = () => {
setCreateQuiz(true);
}
// although not an issue here, but if this hook was
// rewritten and looked like the following, it would
// case an infinite re-render and eventually crash your app
setCreateQuiz(!createQuiz);
}, [createQuiz]);