html 未捕获的错误：重新呈现太多,React限制呈现次数以防止无限循环,(React-js)

我想要的是当我点击按钮时，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;

您遇到的问题是您创建了渲染的无限循环。
这是React中的一个常见陷阱，值得注意。
在React中，只要发生以下两种情况之一，组件就会重新呈现：
1.每当组件的本地状态发生更改时。
1.每当其任何父组件本身重新渲染时。
因此，会发生以下情况：
1.当组件呈现时，pageNo的值为10，这是“真实的”。
1.这意味着我们进入if块，并调用setPageArr，从而设置组件的状态。
1.由于状态更新而重新呈现组件。

pageNo的值仍然是10，因此我们进入if块并再次设置状态。
这个循环不断重复，形成了一个无限循环。
通常，当遇到无限循环时，浏览器会冻结并最终崩溃。
您得到的错误是由于React“捕获”问题并防止冻结。
要解决此问题，我们有两种选择：
1.因为在这种情况下，我们已经知道状态的初始值是一个空数组，所以我们可以简单地将其初始化为空数组。

范例：

const [loadComponentByPage,setPageArr]=useState([]);

1.如果我们不知道初始值，例如从外部API获取值的情况，我们可以使用useEffect钩子。

范例：

useEffect(() => {
   setPageArr(emptyArr)
}, []) // A `useEffect` hook with an empty dependency array should run only once when the component mounts.

无论哪种方式，该位都需要-〉if(pageNo){setPageArr(emptyArr);console.log(emptyArr)}

html 未捕获的错误：重新呈现太多,React限制呈现次数以防止无限循环,(React-js)

1条答案

相关问题

热门标签

最新问答