"错误:重新渲染太多.React 限制渲染次数以防止无限循环." [英] "Error: Too many re-renders. React limits the number of renders to prevent an infinite loop."
问题描述
我一直被困在 React 函数 useState 中.我只是想学习 hooks 和 useState，但我什至费力寻找解决方案也没有任何进展.这是我的完整反应功能:
import React, { useState } from 'react';导入'./MainPart.css';功能主要部分(道具){const [orderData_, setOrderData_] = useState(props.orderData);让 topicData_ = props.topicData;让 titleData_ = props.titleData;让 infoData_ = props.infoData;返回 (<div className='mainWindow'>{getPics(orderData_)}</div><div className='moreNewsDivs'><h4>更多新闻</h4><按钮className='上一轮'onClick={setOrderData_(previous(orderData_))}>‹ <button href='/#' className='next-round'>›<小时/>
<h5 className='topicData'>{topicData_}</h5><h5 className='titleData'>{titleData_}</h5><h6 className='infoData'>{infoData_}</h6>);}函数上一个(orderData_){让新订单数据；如果(订单数据_ === 3){新订单数据 = 2;控制台日志(新订单数据)；返回新订单数据；} else if (orderData_ === 1) {新订单数据 = 3;控制台日志(新订单数据)；返回新订单数据；} 别的 {新订单数据 = 1;控制台日志(新订单数据)；返回新订单数据；}}功能下一个(订单数据_){让新订单数据；如果(订单数据_ === 3){新订单数据 = 1;} else if (orderData_ === 2) {新订单数据 = 3;} 别的 {新订单数据 = 2;}返回新订单数据；}const getPics = picOrder =>{如果(图片订单 === 1){返回 (
我在使用 useState 时遇到错误.甚至加载新页面并且没有按下任何按钮，我的按钮 onClick 事件侦听器已激活，正如我之前在我的错误主题中提到的:
"错误:重新渲染太多.React 将渲染次数限制为防止无限循环."
问题可以在你的 onClick 道具中找到:
花括号之间的所有内容都会立即计算.这会导致在每个渲染循环中调用 setOrderData_ 函数.
通过用箭头函数包装函数，计算出的代码将生成一个函数，只要用户点击按钮就可以调用该函数.
您可以在官方文档中找到有关 JSX 和表达式的更多信息https://reactjs.org/docs/introducing-jsx.html#embedding-expressions-in-jsx
无限重渲染循环
无限循环的原因是因为事件回调中的某些东西(很可能是 setState)正在触发重新渲染.这将再次调用事件回调并导致 React 停止并抛出Too many re-renders".错误.
技术说明
为了更好地理解 JSX 以这种方式工作的原因，请参阅下面的代码.JSX 实际上被编译成 Javascript，每个 prop 都会被传递给对象中的一个函数.有了这些知识，您将看到 handleEvent() 在最后一个示例中被立即调用.
//简单例子//JSX:<button>点击我</button>//JS: createElement('button', { children: 'click me' })createElement("button", { children: "click me" });//正确的事件回调//JSX:<button onClick={handleClick}>点击我</button>//JS: createElement('button', { onClick: handleClick, children: 'click me' })createElement("button", { onClick: handleClick, children: "click me" });//错误的事件回调//JSX:<button onClick={handleClick()}>点击我</button>//JS: createElement('button', { onClick: handleClick(), children: 'click me' })createElement("button", { onClick: handleClick(), children: "click me" });Hi I have been stuck in a React Function useState. I just want to learn hooks and useState, but I can not have any progress even struggling too much to find a solution. Here is my full react function:
import React, { useState } from 'react';
import './MainPart.css';
function MainPart(props) {
const [orderData_, setOrderData_] = useState(props.orderData);
let topicData_ = props.topicData;
let titleData_ = props.titleData;
let infoData_ = props.infoData;
return (
<div className='MainPart'>
<div className='mainWindow'>{getPics(orderData_)}</div>
<div className='information'>
<div className='moreNewsDivs'>
<div className='moreNewsDiv1'>
<h4>MORE NEWS</h4>
</div>
<div className='moreNewsDiv2'>
<button
className='previous-round'
onClick={setOrderData_(previous(orderData_))}
>
‹
</button>
<button href='/#' className='next-round'>
›
</button>
</div>
</div>
<hr />
<div className='topicDiv'>
<h5 className='topicData'>{topicData_}</h5>
<h5 className='titleData'>{titleData_}</h5>
<h6 className='infoData'>{infoData_}</h6>
</div>
</div>
</div>
);
}
function previous(orderData_) {
let newOrderData;
if (orderData_ === 3) {
newOrderData = 2;
console.log(newOrderData);
return newOrderData;
} else if (orderData_ === 1) {
newOrderData = 3;
console.log(newOrderData);
return newOrderData;
} else {
newOrderData = 1;
console.log(newOrderData);
return newOrderData;
}
}
function next(orderData_) {
let newOrderData;
if (orderData_ === 3) {
newOrderData = 1;
} else if (orderData_ === 2) {
newOrderData = 3;
} else {
newOrderData = 2;
}
return newOrderData;
}
const getPics = picOrder => {
if (picOrder === 1) {
return (
<img
src={require('../assets/desktopLarge/mainImage.png')}
className='MainImage'
alt=''
id='mainImage'
/>
);
} else if (picOrder === 2) {
return (
<img
src={require('../assets/desktopLarge/bridge.png')}
className='MainImage'
alt=''
id='mainImage'
/>
);
} else {
return (
<img
src={require('../assets/desktopLarge/forest.png')}
className='MainImage'
alt=''
id='mainImage'
/>
);
}
};
export default MainPart;
I am getting an error while using useState. Even loading the page fresh and not pressed to anything my buttons onClick event listener activated and As I mentioned before at the topic My Error:
"Error: Too many re-renders. React limits the number of renders to prevent an infinite loop."
The problem can be found in your onClick prop:
<button className="previous-round" onClick={setOrderData_(previous(orderData_))}>‹</button>
^
Everything between the curly braces gets evaluated immediately. This causes the setOrderData_ function to be called in every render loop.
By wrapping the function with an arrow function, the evaluated code will result in a function that can be called whenever the user clicks on the button.
<button className="previous-round" onClick={() => setOrderData_(previous(orderData_))}
>‹</button>
You can find more information about JSX and expressions in the official docs https://reactjs.org/docs/introducing-jsx.html#embedding-expressions-in-jsx
Infinite re-render loop
The reason for the infinite loop is because something (most likely setState) in the event callback is triggering a re-render. This will call the event callback again and causes React to stop and throw the 'Too many re-renders.' error.
Technical explanation
To better understand the reason why JSX works this way see the code below. JSX is actually being compiled to Javascript and every prop will be passed to a function in an Object. With this knowledge, you will see that handleEvent() is being called immediately in the last example.
// Simple example
// JSX: <button>click me</button>
// JS: createElement('button', { children: 'click me' })
createElement("button", { children: "click me" });
// Correct event callback
// JSX: <button onClick={handleClick}>click me</button>
// JS: createElement('button', { onClick: handleClick, children: 'click me' })
createElement("button", { onClick: handleClick, children: "click me" });
// Wrong event callback
// JSX: <button onClick={handleClick()}>click me</button>
// JS: createElement('button', { onClick: handleClick(), children: 'click me' })
createElement("button", { onClick: handleClick(), children: "click me" });
这篇关于"错误:重新渲染太多.React 限制渲染次数以防止无限循环."的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
