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/

按顺序渲染组件/渲染一个组件后（响应）

2 个答案: