我如何在isLoading状态下测试useEffect

问题描述

当isLoading状态更改组件时,我想构建测试。 我知道在类组件中可以通过setState和酶来实现,但是我想知道如何在这里实现。

const Spacex = () => {
    const [open,setOpen] = useState(false);
    const [upComingLaunches,setUpComingLaunches] = useState([]);
    const [Launchpad,setLaunchpad] = useState([])
    const [isLoading,setIsLoading] = useState(true);
    useEffect(() => {
        let tempData;
        SpaceXNextLaunche()
            .then(data => {
                setUpComingLaunches(data);
                tempData = data;
                return LaunchPad()
            }).then(dataLaunch => {
                const foundTheLaunch = dataLaunch.docs.filter((Launch,index) => {
                    return tempData.id === Launch.id
                });
                setLaunchpad(foundTheLaunch);
                setIsLoading(false);
            })
    },[])
    if (isLoading) return <LoadingComp />
    return (
        <div>
            <div className="upcoming-launches">
                <h1 className={styles.title}>upcoming launche</h1>
                <div className={styles.CountDownWarrper}>
                    {Object.keys(upComingLaunches).length > 0 ?
                        <Card className={styles.CountDownCard}>
                            <div className={styles.MissionName}>{upComingLaunches.name}</div>
                            <div className={styles.gridBadges}>
                                <div className={styles.CountDown}><CountDownClock upComingLaunches={upComingLaunches} /></div>
                                <div className={styles.badgeFlex}><img className={styles.badge} src={upComingLaunches.links["patch"]["small"]} alt="mission patch" /></div>
                            </div>
                            <GoogleMap
                                mapVisiblity={(e) => setOpen(!open)}
                                open={open}
                                placeName={Launchpad[0].launchpad.full_name} />
                        </Card>
                        : null}
                </div>
            </div>
        </div>
    )
}
export default Spacex;

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)