嗨,我一直陷入 React 函数 useState
中。我只想学习 hooks 和 useState,但即使费尽全力寻找解决方案,我也无法取得任何进展。这是我的完整 react 函数:
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;
我在使用useState
时遇到错误。即使加载新鲜的页面并且没有按下任何按钮,我的按钮 onClick 事件监听器也会激活,正如我之前在主题“我的错误:”中提到的那样:
"Error: Too many re-renders. React limits the number of renders to prevent an infinite loop."
最佳答案
问题可以在您的 onClick
属性中找到:
<button className="previous-round" onClick={setOrderData_(previous(orderData_))}>‹</button>
^
花括号之间的所有内容都会立即计算。这会导致在每个渲染循环中调用 setOrderData_
函数。
通过用箭头函数包装该函数,计算后的代码将生成一个每当用户单击按钮时都可以调用的函数。
<button className="previous-round" onClick={() => setOrderData_(previous(orderData_))}
>‹</button>
您可以在官方文档中找到有关 JSX 和表达式的更多信息 https://reactjs.org/docs/introducing-jsx.html#embedding-expressions-in-jsx
无限重新渲染循环
无限循环的原因是事件回调中的某些内容(很可能是 setState
)正在触发重新渲染。这将再次调用事件回调并导致 React 停止并抛出“太多重新渲染”。错误。
技术说明
为了更好地理解 JSX 以这种方式工作的原因,请参阅下面的代码。 JSX 实际上被编译为 Javascript,每个 prop 都将传递给对象中的函数。有了这些知识,您将看到在最后一个示例中立即调用 handleEvent()
。
// 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" });
关于reactjs - "Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59304283/