我如何在 ReactJS 中处理我的分页？

Question

下面是我的代码，用于处理分页并向我的站点添加上一个和下一个按钮。

const [pageNumber, setPageNumber] = useState(props.match.params.pageno);

useEffect(() => {setPageNumber(props.match.params.pageno)},[props]);

useEffect(() => {
    
        async function fetchData() {
            try {
                const { data } = await axios.get('http://api.tvmaze.com/shows?page=' +pageNumber);
                setShowsData(data);
                setLoading(false);
            } catch (e) {
                console.log(e);
            }
        }
        
        fetchData();
    }, [ pageNumber ]);

return (
            <div>
                    <Link className={pageNumber===0 ? 'hidden' : 'showlink'} to={`/shows/page/${parseInt(pageNumber)-1}`}>
                        Previous
                    </Link>
                    <Link className='showlink' to={`/shows/page/${parseInt(pageNumber)+1}`}>
                        Next
                    </Link>
            </div>
        );

App.css:

.hidden{
   display:none;
}

我该如何完成？

我试图在页码为 0 时隐藏上一页 link，因为在那之前没有任何内容。我试过上面的代码，但是没有效果。

Answer 1

我认为您在 pageNumber 和 0 之间存在类型不匹配。您在下一个 Link 中通过调用 parseInt(pageNumber) 来解决这个问题。您还需要为您的 className 检查执行此操作。否则你永远不会满足你正在检查的那个条件。

快速复习：

"0" === 0 // false
"0" == 0 // true

三等号始终检查数据类型，而双等号将尝试对右侧值执行 type coercion。

Answer 2

您还为 pageNumber 进行条件渲染，例如，

{ pageNumber !== 0 && <Link>{your code}</Link> }

对于这种情况，您还必须检查数据类型的类型，例如 string 进入 pageNumber 并且您正在与 int 进行比较，那么此代码没有任何效果。

使用此条件渲染，您不必依赖 CSS 部分，这将由 javascript.

处理的条件渲染

我如何在 ReactJS 中处理我的分页？

How do I handle my pagination in ReactJS?

pagination

components

jsx

reactjs