按顺序/在渲染组件之后渲染组件(React)

Question

我有一个应用程序，它显示来自API的数据，还有一个加载更多数据的按钮。

我遇到的问题是，在获取和显示数据列表之前，屏幕上的按钮会闪烁。

我希望按钮只显示在列表之后的页面底部。

我能用什么方法做到这一点？

代码：

useEffect(() => {
setLoading(true);
fetchTopRatedMovies(pageNumber).then((newData) =>
setApiData({
...newData,
results: [...apiData.results, ...newData.results]
})
);
setLoading(false);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [pageNumber]);
return (
<div className='top-rated-page-wrapper'>
{isLoading ? (
<Loader />
) : (
<>
<MovieList results={results} />
<PageButton pageLimit={pageLimit} loadMore={loadMore} />
</>
)}
</div>

澄清。该按钮首先加载，并在渲染数据之前闪烁。然后按钮就在页面底部我想要的位置。在数据被渲染之前，我不希望按钮是可见的。

Answer 1

当data > 0时，可以使用条件渲染来渲染加载更多按钮

{ apiData ? <PageButton pageLimit={pageLimit} loadMore={loadMore} /> : null }

Answer 2

我相信这篇文章会回答你的问题。作者使用了相同的钩子，并具体介绍了如何使用状态变量管理生命周期事件。

https://daveceddia.com/useeffect-hook-examples/