显示最后一页时如何隐藏“下一页”按钮？

Question

我使用以下代码从特定页面的 API 获取数据：

const [ loading, setLoading ] = useState(true); 
const [ showsData, setShowsData ] = useState(undefined);
const [ newData, setNewData ] = useState(undefined);
const [pageNumber, setPageNumber] = useState(props.match.params.pageno);

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

现在，对于分页，我尝试隐藏下一个按钮直到最后一页，我可以通过获取最后一页后面的页面的数据来获取最后一页。如果它返回空[]，我就会知道我找到了最后一页并且可以隐藏下一页按钮。为此，我创建了另一个 useEffect：

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

为了隐藏下一个按钮，我执行以下操作：

   { newData!==[] && <Link className='showlink' to {`/shows/page/${parseInt(pageNumber)+1}`}>
                        Next
                    </Link>}

这不起作用，即使在最后一页之后也会显示下一个按钮。我该如何解决这个问题？

Answer 1

将 newData 的初始状态设置为空的Array。

const [ newData, setNewData ] = useState([]);