javascript - React限制渲染次数以防止无限循环错误

Question

下面是我的代码

function App() {
    const [isImportant, setIsImportant] = useState("Yes")
    
    
    function handleClick() {
        setIsImportant("No")
    }
    
    return (
        <div className="state">
            <h1 className="state--title">Is state important to know?</h1>
            <div className="state--value" onClick ={setIsImportant("No")} >
              {isImportant}
            </div>
        </div>
    )
}

但是我收到错误消息“未捕获错误:重新渲染次数过多”。 React 限制渲染次数以防止无限循环。'

如果有人能解释为什么会发生错误，我们将不胜感激!!

Answer 1

问题

查看您当前的代码，这部分:

onClick ={setIsImportant("No")}

每次页面渲染时都会调用setIsImportant，并且由于此函数会修改组件的状态，因此它会尝试再次重新渲染同一组件，从而导致无限循环。

解决方案

有两种方法可以解决此问题，即通过将 setIsImportant 方法包装在包装器中:

 <div className="state--value" onClick ={() => setIsImportant("No")} >
                  {isImportant}
    </div>

或者简单地使用您刚刚创建的函数:

<div className="state--value" onClick ={handleClick} >
              {isImportant}
</div>