我想要的是当我点击按钮时,Reactcomponent
应该re-render
而且我也不想重新渲染这个特定组件上的整个webiste必须重新渲染
它尝试使用挂钩重新呈现页面,但它给我的错误如上所示,也尝试使用forceUpdate()
挂钩,但仍然给我同样的错误
重新呈现组件
这是同一文件的javascript
const LeftCard = ({ cardData: cardComponent, getFileName }) => {
let emptyArr=[];
let pageNo=10;
const [loadComponentByPage,setPageArr]=useState(undefined);
if(pageNo){setPageArr(emptyArr);console.log(emptyArr)}
pageNo<10?pageNo=10:''
pageNo===10 ? pageChange(0):null
function pageChange(num){ <-------- This function is getting called on button click
if(cardComponent !==undefined) {
const mainArray=cardComponent.sort((a,b)=>b.id-a.id).map(val=>{return val});
const arrayLength=cardComponent.length;
if(pageNo===10 && num===-10)return;
if(arrayLength<pageNo && num ===10)return;
pageNo+=num
emptyArr=[]
for(let i=pageNo-10;i<=pageNo;i++){
if(mainArray[i]!==undefined){
emptyArr.push( mainArray[i])
}
}
}
}
if(loadComponentByPage ===undefined )return
这是同一文件的jsx
return (
<div>
{loadComponentByPage.sort((a, b) => (a.id - b.id))
.map((element, i) => {
return (
<div key={i}>
<span className="image-overflow flex ">
<img className="left-sec-image ml2 link Dim" src={element.image} alt={element.topicname}></img>
<div>
<h4 className=" ml4 mr2 light-purple">{element.topicname}</h4>
</div>
</span>
</div>
);
}).reverse()}
<div>
<div className='ml5'>
These are the button that calling the function-------> <button className='ml7' onClick={()=>{pageChange(-10);doNothing()}}><ArrowBackIosSharpIcon /></button>
These are the button that calling the function-------> <button className='ml6' onClick={()=>{pageChange(10);doNothing()}}><ArrowForwardIosSharpIcon /></button>
</div>
</div>
</div>
)};
export default LeftCard;
1条答案
按热度按时间t40tm48m1#
您遇到的问题是您创建了渲染的无限循环。
这是React中的一个常见陷阱,值得注意。
在React中,只要发生以下两种情况之一,组件就会重新呈现:
1.每当组件的本地状态发生更改时。
1.每当其任何父组件本身重新渲染时。
因此,会发生以下情况:
1.当组件呈现时,
pageNo
的值为10,这是“真实的”。1.这意味着我们进入
if
块,并调用setPageArr
,从而设置组件的状态。1.由于状态更新而重新呈现组件。
pageNo
的值仍然是10,因此我们进入if
块并再次设置状态。这个循环不断重复,形成了一个无限循环。
通常,当遇到无限循环时,浏览器会冻结并最终崩溃。
您得到的错误是由于React“捕获”问题并防止冻结。
要解决此问题,我们有两种选择:
1.因为在这种情况下,我们已经知道状态的初始值是一个空数组,所以我们可以简单地将其初始化为空数组。
范例:
1.如果我们不知道初始值,例如从外部API获取值的情况,我们可以使用
useEffect
钩子。范例:
无论哪种方式,该位都需要-〉
if(pageNo){setPageArr(emptyArr);console.log(emptyArr)}