使用状态调用错误 重新渲染太多.React 限制渲染的数量以防止无限循环

Question

当我使用setMiddle(true( 时，它收到错误"太多重新渲染.."

你能告诉我为什么吗？

import React, { useState } from "react";
const App = () => {
const [ test, setTest ] = useState(true)
const [ test1, setTest1 ] = useState(false)
const [ middle, setMiddle ] = useState(false)
const setFrame = () => {
console.log('123')
setTest1(false)
}
const titleScreen = () => {        
setMiddle(true)
setFrame('myRoom');
return
}
const renderFrame = () => {
return (<div>Ta-daa!</div>)
}

return (
<div>
{test1 ? renderFrame() : null}
{test ? titleScreen() : null}
</div>
)
}

export default App

但是当我删除行 setMiddle(true( 和 setTest1(false(时，它可以工作

Answer 1

发生这种情况是因为test在开始时为真，所以调用titleScreen()，在该函数中，您更改了触发重新渲染的状态，并且由于test永远不会更改其值，因此它会再次调用titleScreen()然后您落入称为无限循环的幻影区域。 👻

你如何防止它？ 当应用程序中发生某些事情、用户交互、API 调用等时，始终改变状态。 永远不要在页面渲染时执行此操作，或者如果您这样做，请确保打破条件，在这种情况下，在某个时候更改test值。