setState 没有正确更新反应组件

Question

我正在尝试在 React 中添加分页，并根据 URL 的页码发送查询。 应该获取数据并更新相同的组件。

但是当我从第 2 页转到第 3 页时会出现问题。第 2 页数据和第 3 页数据中的数据交替显示一段时间。

一段时间后，更新新获取的数据。 点击第 3 页后我有 setPost([]) ，但我不知道第 2 页从哪里来。

我想将 setLoading 设置为 true，直到完全获取新获取的数据。

const Daily = ({match}) => {

    const [posts, setPosts] = useState([]);
    const [numberOfPages, setNumberOfPages] = useState([]);
    const [loading, setLoading] = useState(true);
    const perPageItems = 8;

    useEffect(() => {
        const totalPost = () => {
            getPostsCount()
            .then(data => {
                setNumberOfPages(Math.ceil(data/perPageItems))
            })
        }

        const loadIndexPosts = (a, b) => {
            getPostsByIndex(a, b)
            .then(data => {
                if (data.error) {
                    console.log(data.error);
                } else {
                    setPosts(data);
                }
                setLoading(false);
            })
        };

        totalPost()
        if(match.params.page==undefined)
            match.params.page=1;
         var n = parseInt(match.params.page)-1;
         var startIdx = n*perPageItems;
         loadIndexPosts(startIdx, perPageItems)
    },)

    console.log(posts);

    return (

        <div>
            <div className="mt-5 daily-card-feed">
                {loading && <ThreeDotsWave/>}
                {posts.map((post, index) => {
                    return (
                        <div key={index}>
                            <DailyCard post={post}/>
                        </div>
                    )
                })}
            </div>


            <div className="h4 pb-5 pull-right mr-5">
                {match.params.page==1 &&
                    <Link to={`/daily/page/2`} onClick={() => {setLoading(true); setPosts([])}}>Older Post -></Link>}
                {match.params.page!=1 &&
                     <Link to={`${parseInt(match.params.page)+1}`} onClick={() => {setLoading(true); setPosts([])}}>Older Post -></Link>}
            </div>

        </div>
    )

}

Answer 1

首先，让我们弄清楚加载新数据的逻辑。 当新页面到达路径时，您要调用 api。 我认为问题出在这里：

useEffect(() => { 
    const totalPost = () => {
        getPostsCount()
        .then(data => {
            setNumberOfPages(Math.ceil(data/perPageItems))
        })
    }

    const loadIndexPosts = (a, b) => {
        getPostsByIndex(a, b)
        .then(data => {
            if (data.error) {
                console.log(data.error);
            } else {
                setPosts(data);
            }
            setLoading(false);
        })
    };

    totalPost()
    if(match.params.page==undefined)
        match.params.page=1;
     var n = parseInt(match.params.page)-1;
     var startIdx = n*perPageItems;
     loadIndexPosts(startIdx, perPageItems)
},)

我们可以这样打破：

const totalPost = () => {
        getPostsCount()
        .then(data => {
            setNumberOfPages(Math.ceil(data/perPageItems))
        })
    }
const loadIndexPosts = (a, b) => {
    getPostsByIndex(a, b)
    .then(data => {
        if (data.error) {
            console.log(data.error);
        } else {
            setPosts(data);
        }
        setLoading(false);
    })
};

useEffect(() => { 
if(match.params.page==undefined)
    match.params.page=1;
 var n = parseInt(match.params.page)-1;
 var startIdx = n*perPageItems;
 loadIndexPosts(startIdx, perPageItems)
},[numberOfPages])

这将在页码更改时添加调用的依赖关系。 并且仅从点击事件调用totalPost() 。