"오류: 리렌더가 너무 많습니다.무한 루프를 방지하기 위해 리액트는 렌더링 수를 제한합니다."

"오류: 리렌더가 너무 많습니다.무한 루프를 방지하기 위해 리액트는 렌더링 수를 제한합니다."

안녕하세요, 리액트 함수에 갇혀 있습니다.useState훅과 useState를 배우고 싶을 뿐인데, 해결책을 찾기 위해 아무리 발버둥쳐도 진전이 없습니다.풀 리액션 기능은 다음과 같습니다.

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_))}
            >
              &#8249;
            </button>
            &nbsp;&nbsp; &nbsp;&nbsp;
            <button href='/#' className='next-round'>
              &#8250;
            </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소품:

<button className="previous-round" onClick={setOrderData_(previous(orderData_))}>&#8249;</button>
                                            ^

곱슬곱슬한 괄호 사이의 모든 것이 즉시 평가됩니다.이로 인해setOrderData_모든 렌더 루프에서 호출되는 함수입니다.

이 기능을 화살표 기능으로 감싸면 사용자가 버튼을 클릭할 때마다 호출할 수 있는 기능이 됩니다.

<button className="previous-round" onClick={() => setOrderData_(previous(orderData_))}
>&#8249;</button>

JSX 및 식에 대한 자세한 내용은 공식 문서http://https://reactjs.org/docs/introducing-jsx.html#embedding-expressions-in-jsx 를 참조해 주세요.

무한 리렌더 루프

무한 루프가 발생하는 이유는 (가장 가능성이 높은)setState콜백이 재발송신을 트리거하고 있는 경우).그러면 이벤트 콜백이 다시 호출되고 React가 중지되어 'Too many re-renders' 오류가 발생합니다.

기술적인 설명

JSX가 이렇게 작동하는 이유를 더 잘 이해하려면 아래 코드를 참조하십시오.JSX는 실제로 Javascript로 컴파일되고 있으며 모든 소품은 객체의 함수로 전달됩니다.이 지식을 통해 알 수 있습니다.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" });

버튼을 아래 버튼으로 교체해 주세요.

<button className="previous-round" onClick={() => setOrderData_(previous(orderData_))}>&#8249;</button>

이는 익명 함수 없이 사용되는 경우 onClick 함수가 즉시 호출되고 setOrderData가 다시 렌더링하여 무한 루프가 발생하기 때문입니다.따라서 익명 기능을 사용하는 것이 좋습니다.

도움이 됐으면 좋겠다.의심을 품다

네 코드를 뒤져봤을 때 뭔가 찾았어.

클릭 기능은 화살표 기능이어야 합니다.온클릭은 이벤트이며 온클릭 내의 함수를 직접 호출하는 것입니다.리턴 내부에서 직접 상태를 설정하기 때문에 너무 많은 리렌더가 발생합니다.그것은 효과가 없다.

여기서 setState를 호출하면 컴포넌트가 무한 루프를 생성할 수 있습니다.렌더는 순수하게 유지되어야 하며 상태 또는 소품에 따라 JSX fragment/자녀 구성요소를 조건부로 전환하기 위해 사용해야 합니다.렌더 내의 콜백을 사용하여 상태를 갱신하고 위의 행이 링크에서 가져온 변경에 따라 다시 갱신할 수 있습니다.https://itnext.io/react-setstate-usage-and-gotchas-ac10b4e03d60

( just살 just just just => 능 ) :

<button className="previous-round" onClick={() => setOrderData_(previous(orderData_))}>
&#8249;
</button>

사용하다

            <button
              className='previous-round'
              onClick={() => setOrderData_(previous(orderData_))}
            >
              &#8249;
            </button>

이건 나한테 효과가 있었어...

언급URL : https://stackoverflow.com/questions/59304283/error-too-many-re-renders-react-limits-the-number-of-renders-to-prevent-an-in