Question

我是MERN堆栈开发人员的新手。我正在尝试计算分页的页数。信息对象以console.log打印。但是，当我尝试在for循环中使用它时，会出现错误。

有人可以解释一下什么是React逻辑或背后的流程吗？我多次遇到这个问题，但是可以通过条件渲染来解决。但是，由于某种原因，我无法解决此问题，而且我似乎也不了解反应流程的逻辑。

App Component :
    const App = () => {
      const [episodes, setEpisodes] = useState({});
      const [loading, setLoading] = useState(false);
      const [currentPage, setCurrentPage] = useState(1);
      const [episodesPerPage, setEpisodesPerPage] = useState(10);
    
      useEffect(() => {
        const fetchEpisodes = async () => {
          setLoading(true);
          const res = await axios.get('https://rickandmortyapi.com/api/episode/');
          setEpisodes(res.data);
          setLoading(false);
        };
        fetchEpisodes();
      }, []);
      console.log(episodes.info);
      return (
        <div>
          <div id='header'>
            <h1>Rick & Morty</h1>
            <h2>Episodes</h2>
          </div>
          <div>
            <h3>All Episodes</h3>
            <EpisodeList episodeList={episodes.results} loading={loading} />
            <Pagenation info={episodes.info} />
          </div>
        </div>
      );
    };
    
    export default App;

    Pagenation Component:
    
    const Pagenation = ({ info }) => {
      const pageNumbers = [];
        console.log(info);
      for (let i = 1; i <= Math.ceil(info.count / 20); i++) {
        pageNumbers.push(i);
      }
      return (
        <nav aria-label='...'>
          <ul class='pagination pagination-lg'>
            {pageNumbers.map((number) => {
              return (
                <li class='page-item active' aria-current='page'>
                  <span class='page-link'>
                    {number}
                    <span class='sr-only'>(current)</span>
                  </span>
                </li>
              );
            })}
          </ul>
        </nav>
      );
    };

Answer 1

有条件的渲染也可以是这里的解决方案。

episodes最初是一个空对象，因此episodes.info最初是undefined。这意味着您无法访问info上的属性，而不先检查它是否首先存在，因为您已经知道它的开头将是undefined。

一个简单的解决方案可能看起来像这样：

{episodes.info && <Pagenation info={episodes.info} />}

您也可以将条件移到Pagenation组件中，如下所示：

if (info) {
  for (let i = 1; i <= Math.ceil(info.count / 20); i++) {
    pageNumbers.push(i);
  }
}

不管您采取何种避免错误的策略，问题的核心是在挂载组件后加载了数据。这意味着您需要考虑至少一个渲染缺少的数据。

TypeError：无法读取未定义的属性“ count”

1 个答案: