React中传递props后Front组件无法渲染，如何解决？

问题根源 #

你在App组件中传递begin props时，错误地直接调用了startGame()函数，而非传递函数本身：

<Front begin={startGame()} />

这种写法会导致组件渲染时立即执行startGame，触发setStart更新状态；状态更新会触发App组件重新渲染，重新渲染时又会再次调用startGame()，再次触发状态更新，形成无限重渲染循环，最终导致组件无法正常渲染。

修复方案 #

只需传递函数引用给begin props，不要调用函数：

<Front begin={startGame} />

逻辑验证 #

修复后，只有当Front组件中的「Start Quiz」按钮被点击时，才会执行startGame函数触发状态更新，不会再出现无限循环，组件可正常渲染并响应点击操作。

内容的提问来源于stack exchange，提问作者user19260499