错误：分页（...）：渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null答案

【问题标题】：Error: Pagination(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null错误：分页（...）：渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null
【发布时间】：2021-03-05 16:03:49
【问题描述】：

所以我创建了这个分页组件。我在我使用的应用程序的某些部分收到错误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

【问题讨论】：

请包含Minimal, Complete, and Reproducible 代码示例。没有任何代码检查，很难提供帮助。
是的 @DrewReese 刚刚添加了我的代码 sn-p
你认为if (int === 1) return 会做什么？
很明显，它检查Math操作的结果到1 @DrewReese
我猜你看不出它从Pagination 组件返回undefined。

标签： reactjs

【解决方案1】：

错误消息指出This usually means a return statement is missing. Or, to render nothing, return null.您的组件正在返回undefined。

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

Preventing a component from rendering

在极少数情况下，您可能希望组件隐藏自己，即使它由另一个组件渲染。为此，请返回 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>
  );
}

【讨论】：