类型错误： 无法读取未定义的属性'count'

Question

我是一名MERN堆栈开发新手。我正在计算分页的页数。info对象在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);
}
}

不管您采取什么策略来避免错误，问题的核心是您有在组件装载后加载的数据。这意味着您需要考虑至少一次渲染中丢失的数据。