useState 调用错误 Too many re-renders。 React 限制渲染次数以防止无限循环答案

【问题标题】：useState calls error Too many re-renders. React limits the number of renders to prevent an infinite loopuseState 调用错误 Too many re-renders。 React 限制渲染次数以防止无限循环
【发布时间】：2020-10-09 02:28:30
【问题描述】：

当我使用 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) 行时，它可以工作

【问题讨论】：

您应该避免在渲染方法中设置状态（返回 (
...
)）。在这种情况下，您检查状态变量“test”是否为真，如果是，则使用 setMiddle 和 setTest1 更改状态，这将触发重新渲染。尝试决定在 render 方法之外渲染什么，你应该能够让它按预期工作

标签： reactjs react-hooks

【解决方案1】：

发生这种情况是因为 test 在开头为真，因此调用了 titleScreen()，在该函数内部，您改变了触发重新渲染的状态，并且由于 test 永远不会更改其值，因此它调用再次titleScreen() 然后你掉进了一个叫做无限循环的幻象区域。 ?

你如何预防它？当您的应用程序、用户交互、API 调用等发生某些事情时，总是改变状态。永远不要在页面渲染上这样做，或者如果你这样做，请确保打破条件，在这种情况下，将 test 值更改为一点。

【讨论】：