TypeError: Cannot read property 'count' of undefined

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: Cannot read property 'count' of undefined

TypeError: Cannot read property 'count' of undefined

node.js

express

reactjs

mern