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在开始时为true，所以调用了titleScreen()，并且在该函数内，您对触发重新渲染的状态进行了更改，并且由于test从不更改其值，它再次调用titleScreen()，然后您进入称为无限循环的幻像区域。 ?

如何预防？总是在应用程序，用户交互，API调用等发生任何事情时改变状态。从不在页面呈现时执行此操作，或者如果执行此操作，请确保打破条件，在这种情况下，请更改test有价值。

useState调用错误重新渲染太多。 React限制了渲染次数以防止无限循环

1 个答案: