react native 原生js解决局部数据渲染

React Native 版本执行0.57的规则

商品优惠券，显示立即领取/已领取按钮，需要结合后台返回数据，渲染大list下的局部数据，包括下面的商品数据

{/* 优惠券弹框 */}
              <Modal
                    visible={this.state.couponModalFlag}
                    animationType='fade'
                    transparent={true}
                    onRequestClose={() => { this.setState({ couponModalFlag: false }) }}
                >
                    <View
                        // onPress={() => { this.setState({ couponModalFlag: false }) }}
                        // activeOpacity={1}
                        style={styles.maskClick}
                    >

                        <View style={styles.couponContent}>
                            <View style={styles.modalHeader}>
                                <Text style={styles.modalHeaderTitle}>优惠券</Text>
                                <TouchableOpacity
                                    onPress={() => { this.setState({ couponModalFlag: false }) }}
                                    activeOpacity={.8}
                                    style={styles.modalCloseBtn}
                                >
                                    <Image source={require('../../images/close.png')} />
                                </TouchableOpacity>
                            </View>
                            <ScrollView>
                                {this.state.goodsDetailInfo.wsCouponInfoList && this.state.goodsDetailInfo.wsCouponInfoList.length > 0 && this.state.goodsDetailInfo.wsCouponInfoList.map((item, index) => {
                                    return (
                                        <ImageBackground
                                            key={index}
                                            style={[styles.commonCode, { opacity: !item.status && (item.iftake == "0" || item.iftake == "no") ? 1 : 0.6 }]}
                                            source={require("../../images/discount_on.png")}
                                        >
                                            <View style={styles.moneyBox}>
                                                <Text style={styles.money}>¥<Text>{item.price}</Text></Text>
                                                <Text style={styles.moneyTxt}>满{item.fulCut}元可用</Text>
                                            </View>
                                            <View style={styles.detailInfo}>
                                                <Text style={styles.detailInfoTit}>{item.couponName}</Text>
                                                <Text numberOfLines={2} style={styles.detailInfoTxt}>详细说明：{item.remarks}</Text>
                                                <Text style={styles.detailInfoDate}>有效期：{item.couponstartDate}-{item.couponendDate}</Text>
                                            </View>
                                            <TouchableOpacity
                                                activeOpacity={0.8}
                                                style={styles.btnBox}
                                                onPress={() => {
                                                    if (!item.status && (item.iftake == "0" || item.iftake == "no")) {
                                                        this.selectCoupon(item);
                                                    }
                                                }}>
                                                <Text style={styles.btnTxt}>{!item.status && (item.iftake == "0" || item.iftake == "no") ? "点击领取" : "已领取"}</Text>
                                            </TouchableOpacity>
                                        </ImageBackground>
                                    )
                                })}
                            </ScrollView>
                        </View>
                    </View>
                </Modal>



// 领取优惠券
    selectCoupon(item) {
        Fetch(requestUrl, {
            'userId': id,// 用户id
            'activityId': item.activityId,// 活动id
            'actiCouId': item.id, //优惠券id
        }).then(data => {
            console.log(data)
            if (data.status == 'success') {
                let goodsObj = this.state.goodsDetailInfo;
                for (let i = 0; i < goodsObj.wsCouponInfoList.length; i++) {
                    if (goodsObj.wsCouponInfoList[i].id == item.id) {
                        goodsObj.wsCouponInfoList[i].status = "yes"
                        // goodsObj.wsCouponInfoList = Public.arrDelete(goodsObj.wsCouponInfoList, i)
                    }
                }
                ToastShow({ "text": '领取成功' })
                this.setState({
                    couponModalFlag: goodsObj.wsCouponInfoList.length > 0 ? true : false,
                    goodsDetailInfo: goodsObj,
                })
                console.log(this.state.goodsDetailInfo)
            } else {
                ToastShow({ "text": '领取失败' })
            }
        })
    }

把返回的数据通过筛选，整合成下图

{this.state.goodsDetailInfo.desc_urls && this.state.goodsDetailsTabIndex == 1 ?
                        <View style={styles.configureContent}>
                            {this.state.newMapList && this.state.newMapList.length > 0 ? this.state.newMapList.map((item, index) => {
                                return (
                                    <View key={index} style={styles.configureItem}>
                                        <Text style={styles.configureText}>{item.parameterName}：</Text>
                                        <Text style={styles.configureVal}>{item.parameterValue}</Text>
                                    </View>
                                )
                            })
                                :
                                <View style={{
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    height: Px2dp(100)
                                }}>
                                    <Text style={{ fontSize: Px2dp(14), color: Colors.text666 }}>暂无商品详情</Text>
                                </View>
                            }
                        </View> : null
                    }
//获取商品详细信息
    getProductDetailInfo(attributeStr) {
        this.setState({
            isLoading: true,
        })
        Fetch(requestUrl, {
            "wsProductId": this.state.goodsInfo.ws_product_id ? this.state.goodsInfo.ws_product_id : '',//微商商品id
            "productId": attributeStr == '' ? this.state.goodsInfo.id : '',//商品id
            "attributeStr": attributeStr,//商品类型详情
            "userId": UserInfo && UserInfo.id ? UserInfo.id : "0",//用户ID
        }).then(data => {
            console.log(data);
            this.setState({
                isLoading: false,
            })
            if (data.status == 'SUCCESS') {
                this.setState({
                    goodsDetailInfo: data.data,
                    numIndex: data.data.stock > 0 ? 1 : 0,
                })
                for (var i in data.data.parameterMapList) {
                    if (data.data.parameterMapList[i].parameterValue != '') {
                        var arrStr = ''
                        arrStr = { parameterName: data.data.parameterMapList[i].parameterName, parameterValue: data.data.parameterMapList[i].parameterValue }
                        this.state.newMapList.push(arrStr)
                    }
                }
            } else {
                ToastShow({ "text": "查询商品详情失败" })
            }
        })
    }