오류 : 페이지 매김 (...) : 렌더링에서 반환 된 항목이 없습니다. 이것은 일반적으로 return 문이 없음을 의미합니다. 또는 아무것도 렌더링하지 않으려면 null을 반환합니다.

debugcn 에 게시 Dev

Albert Dugba

그래서이 페이지 매김 구성 요소를 만들었고 Error: Pagination(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.다른 부분은 잘 작동하는 동안 사용했던 내 앱의 일부 부분 에서 오류가 발생 합니다. 나는 무슨 일이 일어나고 그것을 고치는 지 모른다. 이것은 내 코드입니다. 다른 솔루션을 시도했지만 여전히 작동하지 않습니다.


const Pagination = ({ dataPerPage, totaldata, paginate }) => {
  const [currentPage, setCurrentPage] = useState(0)
  const pageNumbers = []

  const int = Math.ceil(totaldata / dataPerPage)
  if (int === 1) return

  for (let i = 1; i <= int; i++) {
    pageNumbers.push(i)
  }

  return (
    <nav>
      <ul className="pagination">
   
        {pageNumbers.map(number => (
          <li key={number} className="page-item">
            <a
              onClick={() => {
                setCurrentPage(number)
                paginate(number)
              }}
              href="#"
              className="page-link"
            >
              {number}
            </a>
          </li>
        ))}

       
      </ul>
    </nav>
  )
}

export default Pagination

드류리스

This usually means a return statement is missing. Or, to render nothing, return null.구성 요소가 반환 중이 라는 오류 메시지가 표시됩니다 undefined.

if (int === 1) return // <-- returns undefined!

구성 요소 렌더링 방지

드문 경우지만 다른 구성 요소에 의해 렌더링 된 경우에도 구성 요소가 자신을 숨기도록 할 수 있습니다. 이렇게하려면 null렌더링 출력 대신 반환 합니다.

유효한 JSX를 반환해야합니다. 구성 요소가 아무 것도 렌더링하지 않도록하려면 구성 요소가를 반환해야합니다 null.

const Pagination = ({ dataPerPage, totaldata, paginate }) => {
  const [currentPage, setCurrentPage] = useState(0);
  const pageNumbers = [];

  const int = Math.ceil(totaldata / dataPerPage);
  if (int === 1) return null; // <-- return null to render nothing

  for (let i = 1; i <= int; i++) {
    pageNumbers.push(i);
  }

  return (
    <nav>
      <ul className="pagination">
   
        {pageNumbers.map(number => (
          <li key={number} className="page-item">
            <a
              onClick={() => {
                setCurrentPage(number)
                paginate(number)
              }}
              href="#"
              className="page-link"
            >
              {number}
            </a>
          </li>
        ))}

       
      </ul>
    </nav>
  );
}

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-5

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사