我是一个MERN stack开发新手。我正在尝试计算分页的页数。info对象打印在console.log中。但是，当我尝试在for循环中使用它时，我得到了一个错误。

谁能解释一下这背后的反应逻辑或流程是什么？我曾经多次遇到这个问题，但是，可以用条件渲染来修复它。但是，不知何故，我没能解决这个问题，我似乎也不明白流反应的逻辑。

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>
      );
    };