时间戳

首页 > 解决方案 > 为什么我在渲染这个“加载”组件时遇到问题？

reactjs - 为什么我在渲染这个“加载”组件时遇到问题？

问题描述

我有 2 个组件使用从 json 服务器获取的相同数据。
一个组件使用如下所示的数据：

function Home(props) {
return (
    <div className='container'>
        <div className='row align-items-start'>
            <div className='col-12 col-md m-1'>
                <RenderCard item={props.dish}
                    isLoading={props.dishesLoading}
                    errMess={props.dishErrMess} />
            </div>
            <div className='col-12 col-md m-1'>
                <RenderCard item={props.promotion}
                    isLoading={props.promoLoading}
                    errMess={props.promoErrMess} />
            </div>
            <div className='col-12 col-md m-1'>
                <RenderCard item={props.leader}
                    isLoading={props.leaderLoading}
                    errMess={props.leaderErrMess} />
            </div>
        </div>
    </div>
);}

另一个组件使用的数据如下所示：

const leaders = props.leaders.map((leader) => {
    return (
        <RenderLeader leader={leader} isLoading={props.isLoading}
            errMess={props.errMess} />
    );
});

RenderLeader 和 RenderCard 组件都具有类似的结构，带有 if-else 循环来显示加载动画或错误消息以及实际内容。 

function RenderLeader({ leader, isLoading, errMess }) {
if (isLoading) {
    return (
        <Loading />
    );
}
else if (errMess) {
    return (
        <h4>{errMess}</h4>
    );
}
else
    return (CONTENT)

问题是 Home 组件显示加载动画和错误消息，而不是具有完全相同结构的其他组件。此外，实际上是为第二个组件获取数据，只是它不会显示加载动画和错误消息。这有什么问题？
编辑
这就是我调用它们的方式： 

<Home
                dish={this.props.dishes.dishes.filter((dish) => dish.featured)[0]}
                dishesLoading={this.props.dishes.isLoading}
                dishErrMess={this.props.dishes.errMess}
                promotion={this.props.promotions.promotions.filter((promo) => promo.featured)[0]}
                promoLoading={this.props.promotions.isLoading}
                promoErrMess={this.props.promotions.errMess}
                leader={this.props.leaders.leaders.filter((leader) => leader.featured)[0]}
                leaderLoading={this.props.leaders.isLoading}
                leaderErrMess={this.props.leaders.errMess}

            />

<Route path='/aboutus' component={() => <About leaders={this.props.leaders.leaders}
                            isLoading={this.props.leaders.isLoading}
                            errMess={this.props.leaders.errMess} />} />

标签： reactjsreduxreact-propsconditional-rendering

解决方案

Home 组件可以正常工作，因为它可以呈现单独的卡片。而对于下面的结构，

const leaders = props.leaders.map((leader) => {
return (
    <RenderLeader leader={leader} isLoading={props.isLoading}
        errMess={props.errMess} />
);
});

如果 props.leaders 为空，它不能迭代，因此RenderLeader 永远不会被调用。因此，当 props.isLoading 为 true 时，props.leaders 将为空，上面的箭头函数将不返回任何内容。一旦 props.leaders 被填充，上面的函数就会被调用，但是 props.isLoading 已经被设置为 false。这就是未显示加载图标或错误消息的原因。

您可以将调用修改为，

<div className="col-12">
       <Media list>
            <RenderLeaderList leaders={props.leaders} isLoading= 
                   {props.leadersLoading} errMess={props.leadersErrMess}/>
       </Media>
</div>

并创建一个名为 RenderLeaderList 的新函数；

function RenderLeaderList({leaders, isLoading, errMess})
{
      if(isLoading)
      {
        return(
         <Loading />
        );
      }
      else if(errMess)
      {
         return(
            <h4>{errMess}</h4>
         );
      }
      else{
         if(leaders!=null)
         {
            const leaders_map = leaders.map((leader) => {
            return(
                <div key={leader.id} className="col-12 mt-5">
                    <RenderLeader leader={leader}/>
                </div>
            );
          });
         return (
            <div>
                {leaders_map}
            </div>
        );
    }
}

} 使其工作。希望能帮助到你！:D

推荐阅读