React实现分页功能时提示SetPage is not a function报错如何解决？

问题原因 #

你在App组件的JSX中重复渲染了2次CoinsPagination组件，其中位于搜索框下方、Coins组件上方的第一次调用<CoinsPagination />没有传入任何props，导致这个实例内部获取到的setPage为undefined，触发类型错误。

解决方法 #

二选一即可：

• 如果只需要保留一处分页：直接删除无props的<CoinsPagination />实例，保留Coins组件下方已经传入page和setPage的实例即可。
• 如果需要同时在列表上下显示分页：给两处CoinsPagination都传入对应props即可，将上方的组件调用修改为：

<CoinsPagination page={page} setPage={setPage} />

优化建议 #

可以给CoinsPagination组件的点击事件加可选链判断，避免未传props时直接抛出运行时错误：

<Pagination.First onClick={() => setPage?.(1)} />
<Pagination.Item onClick={() => setPage?.(1)}>{1}</Pagination.Item>

内容的提问来源于stack exchange，提问作者Ajay Bains