NodeJS 跳过大量空数组-状态和控制台中的问题

jtoj6r0c  于 2023-01-04  发布在  Node.js
关注(0)|答案(1)|浏览(108)

在getRecommend / getPopular函数中获取数据,然后将结果写入相应的状态,并将它们传播到另一个组件,问题是,当显示这两个状态时,我首先有一堆空数组,这是否正常,如果不正常,如何修复?
控制台[]大约有10-15行,然后数据来了

const {userId} = useParams();
    const {page} = useParams();

    const [recommend, setRecommend] = useState([]);
    const [popular, setPopular] = useState([]);

    useEffect(() => {
        const fun = async () => {
            try {
                let result = await getRecommend(userId, 6)
                if (result) {
                    setRecommend(result)
                }
            } catch (err) {
                console.log("err")
            }
        }
        fun()
    }, [userId])
ccrfmcuu

ccrfmcuu1#

首先,如果你有一个空数组的状态,这是正常的。你可以通过添加skeleton来改进用户体验
此外,您可以通过检查更多的提取条件来减少调用API(以及渲染)的次数,如下所示:

useEffect(() => {
        const fun = async () => {
            try {
                let result = await getRecommend(userId, 6)
                if (result) {
                    setRecommend(result)
                }
            } catch (err) {
                console.log("err")
            }
        }
        if(userId && page => 0){
           fun()
        }
    }, [userId])

相关问题