Question

我正在获取产品列表，并在平面列表中显示。当有人要添加一定数量的商品或移除某商品时，我将显示仅该特定卡片上的负载。我不应该在列表对象模型中添加属性。

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>
    );
}

在获取响应到来之前，我只想显示加载而不是最后一个图标。

Answer 1

您需要某种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>
    );
}

Answer 2

使用Counter的主要组件：

   // 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} />
     )
   }

您的Counter对象：

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>
    );
}

Answer 3

1）保持数组处于 loadingItems 之类的状态。在onPress中，将try块之前的 itemId 推入 loadingItems 中。无论调用是否成功，请弹出try或catch块中的 itemId 。

2）在组件中添加一个加载道具，并检查 itemId 是否在 loadingItems 数组中。

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

希望这会有所帮助。

如何显示仅在清单中的一项加载？

3 个答案: