If - else语句不适合在ReactJS中工作。

Question

我使用If - else条件显示api中的一些数据，如果没有找到数据，则应该显示No data Found文本。

但问题是，No Data Found文本会立即显示页面打开。它不会等待从api加载的全部数据出现。当数据被加载时，它会消失，或者如果数据不存在，就停留在那里。

如何使No Data Found文本仅在数据加载并验证为null之后才会出现。谢谢。

这是我的密码。

var showFarmList = '';
    if (farmCount >= 1) {
        showFarmList = user.farm.map((farm) => {
            return (
                <div className="col-6" key={farm.farmid}>
                    <div className="card card-dull card-height">
                        <Link to={`/farm-details/${user.username}/${farm.farmid}`}>

                            <div className="card-body">
                                <div className="farms-card">
                                    <h5 className="card-title title-small truncate-1">{farm.farmname}</h5>

                                </div>
                                <p className="card-text truncate-3">{farm.county.countydescription}
                                </p>

                            </div>
                        </Link>
                    </div>
                </div>
            )
        });
    }
    else {
        showFarmList =
        <>
                <div className='row'>
                    No Data Found
                </div>
            </> 
    }

    return (
        <>
            <div className="appHeader no-border transparent position-absolute">
                <div className="left">
                    <a onClick={() => navigate(-1)} className="headerButton goBack">
                        <i className="fi fi-rr-cross"></i> </a>
                </div>
                <div className="pageTitle"></div>
            </div>
            <div id="appCapsule" className="mt-2">
                <div className="section my-farmlist">
                    <h2>My Farms</h2>
                    <p className="my-farmtext">Here is a list of all the Farms you have registered on Tunda Care</p>

                    <div className="row">
                        {isLoading && <CardSkeleton cards={2} />}

                        {showFarmList}

                    </div>
                </div>
            </div>

        </>
    );
}
export default MyFarmList;

这是输出。

​

Answer 1

我想如果我理解正确的话，这就是你所期望的。在第二部分中添加!isLoading &&。

 <div className="row">
                        {isLoading && <CardSkeleton cards={2} />}

                        {!isLoading && showFarmList}

                    </div>