reactjs 如何显示只加载平面列表中的一个项目?

c9qzyr3d  于 2022-12-22  发布在  React
关注(0)|答案(4)|浏览(151)

我得到一个产品列表,我在一个平面列表中显示它.当某人想要增加一个项目的数量或删除一个项目时,我将显示一个加载只在那张特定的卡片上.我不应该增加属性到列表对象模型。

const Counter = ({ quantity, itemId }) => {
    console.log(quantity);
    console.log('ITEM ID ',itemId);
    return (
        <View style={{flexDirection:'row', alignItems:'center'}}>
            <Icon style={{fontSize: 25, color: '#059b9a',marginRight:25}} name='md-trash' onPress={()=> removeItem(itemId)} />
            <Icon style={{fontSize: 25, color: '#059b9a',marginRight:10}} name='md-remove'/>
            <View style={{marginRight:10, alignItems:'center',justifyContent:'center'}}>
                <CustomText value={`${numTranslate(quantity)}`} style={{color:'#059b9a', fontSize:22, fontWeight:'bold'}}/>
                <CustomText style={{fontSize:10}} value={'حداکثر'} />
            </View>
            <Icon style={{fontSize: 25, color: '#059b9a', marginRight:10}} name='md-add' />
        </View>
    );
}

我只想显示载入,而不是最后一个图标,直到获取响应来。

kgsdhlau

kgsdhlau1#

你需要某种prop来显示你的数据是否已经获取,因为你没有附加你的数据获取,我就假设你可以把它添加到你的组件中。

const Counter = ({ quantity, itemId, isLoading }) => {
    console.log(quantity);
    console.log('ITEM ID ',itemId);

    //declare conditional constant for icon
    const icon = isLoading ? <div><p>Loading...</p></div> : <Icon style={{fontSize: 25, color: '#059b9a', marginRight:10}} name='md-add' />
    return (
        <View style={{flexDirection:'row', alignItems:'center'}}>
            <Icon style={{fontSize: 25, color: '#059b9a',marginRight:25}} name='md-trash' onPress={()=> removeItem(itemId)} />
            <Icon style={{fontSize: 25, color: '#059b9a',marginRight:10}} name='md-remove'/>
            <View style={{marginRight:10, alignItems:'center',justifyContent:'center'}}>
                <CustomText value={`${numTranslate(quantity)}`} style={{color:'#059b9a', fontSize:22, fontWeight:'bold'}}/>
                <CustomText style={{fontSize:10}} value={'حداکثر'} />
            </View>
     {/* render conditional expression instead of jsx element */}
     {icon}
        </View>
    );
}
iqjalb3h

iqjalb3h2#

使用计数器的主要组件:

// Call setState here or anywhere you want to fetch data or...
   fetchData =()=> {
        this.setState({isLoading: true});
        axios.post(url).then(response=>{
          this.setState({isLoading: false});
       })
   }

   render(){
     return(
       <Counter quantity={quantity} itemId={itemId} isLoading={this.state.isLoading} />
     )
   }

您的计数器对象:

const Counter = ({ quantity, itemId, isLoading }) => {
    console.log(quantity);
    console.log('ITEM ID ',itemId);
    return (
        <View style={{flexDirection:'row', alignItems:'center'}}>
            <Icon style={{fontSize: 25, color: '#059b9a',marginRight:25}} name='md-trash' onPress={()=> removeItem(itemId)} />
            <Icon style={{fontSize: 25, color: '#059b9a',marginRight:10}} name='md-remove'/>
            <View style={{marginRight:10, alignItems:'center',justifyContent:'center'}}>
                <CustomText value={`${numTranslate(quantity)}`} style={{color:'#059b9a', fontSize:22, fontWeight:'bold'}}/>
                <CustomText style={{fontSize:10}} value={'حداکثر'} />
            </View>
            {isLoading ?
            <LoadingIcon />
            :
            <Icon style={{fontSize: 25, color: '#059b9a', marginRight:10}} name='md-add' />
            }
        </View>
    );
}
sxissh06

sxissh063#

1)维护一个类似loadingItems状态的数组,在onPress中将itemId压入try块前的loadingItems中,无论调用成功与否,都弹出try或catch块中的itemId
2)向组件添加一个加载属性,并检查itemId是否在loadingItems数组中。

<Card 
isLoading={this.state.loadingItems.includes(item.Id)
...
/>

希望这个有用。

gajydyqb

gajydyqb4#

1.创建一个新变量loadingItem
1.在调用fetchData方法之前,将itemId存储在loadingItem
1.检查加载是否为真,并且项目ID是否等于加载项目

{loading && itemId === loadingItem ? <LoadingIcon />
     :
     <Icon style={{fontSize: 25, color: '#059b9a', marginRight:10}} name='md-add' />
     }

相关问题