ReactJS中If-else逻辑异常：未等API加载完成即显示无数据

你的问题出在未结合加载状态判断无数据提示的显示时机：页面初始化时farmCount默认是0，直接触发else分支显示“No Data Found”，而此时API还在加载中。要实现仅在加载完成且确认无数据时显示提示，需要把isLoading状态加入判断逻辑。

修改方案 #

调整showFarmList的赋值逻辑，只有当**加载完成（!isLoading）且确实无数据（farmCount < 1）**时，才渲染无数据提示：

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 if (!isLoading) {
    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>
    </>
);

逻辑说明 #

1. API加载过程中（isLoading = true）：showFarmList为空，页面只显示骨架屏<CardSkeleton>，不会出现无数据提示
2. 加载完成后：
   • 有数据（farmCount >=1）：渲染农场列表
   • 无数据（farmCount <1）：显示“No Data Found”提示

这样就解决了页面刚加载就提前显示无数据文本的问题。

内容的提问来源于stack exchange，提问作者John Mark