两重map遍历的情况下,渲染子组件,第一个数据显示的是子组件的默认数据,并不是传给子组件的数据



  • _showOrderUi() {
        let { shopCartOrGoodsDetail, userShoppingCartData, goodsData, buyNum, totalPrice, totalFare } = this.state;
        let content = null;
        if (shopCartOrGoodsDetail === 0) {
          content = userShoppingCartData.map((item, index) => {
            let goodsDTOList = item.weappGoodsDTOList;
            return (
              <View className='item' key={item.weappShopId + Math.random(5) + ""}>
                <IntoStore
                  name={item.shopName}
                  shopId={item.weappShopId}
                />
                {goodsDTOList.map((goodsItem, index) => {
                  return (
                    <SettlementVegetables key={item.weappGoodsId + Math.random(10) + ''}
                      goodsImage={Api.BaseUrl + goodsItem.goodsImageFirst}
                      goodsName={goodsItem.weappGoodsName}
                      goodsDesc={goodsItem.weappGoodsDesc}
                      goodsSellingPrice={goodsItem.weappGoodsSellingPrice}
                      goodsNum={goodsItem.weappGoodsNum}
                      showOperate={false}
                    />
                  )
                })}
                <View className='freight'>
                  <Text className='freight-text'>运费</Text>
                  <Text className='freight-input'>&yen; {item.farePrice} 元</Text>
                </View>
                <View className='common'>
                  <Text className='common-text'>订单备注</Text>
                  <Input className='common-input' placeholder='选填请和商家协商一致'
                    onInput={(text) => {
                      console.log("text", text.currentTarget.value)
                      item.weappGoodsOrderRemark = text.currentTarget.value
                    }} />
                </View>
                <View className='sum'>
                  <Text className='sum-count'>共{item.weappGoodsNumTotal}件</Text>
                  <Text className='sum-text'>小计:</Text>
                  <View className='sum-price-box'>
                    <Text className='sum-price'>&yen; {item.weappGoodsPriceTotal} 元</Text>
                    <Text className='sum-fare'>(含运费:&yen; {item.farePrice} 元)</Text>
                  </View>
    
                </View>
              </View>
            )
          })
    
        } else if (shopCartOrGoodsDetail === 1) {
          content = <View className='item'>
            <IntoStore
              name={goodsData.weappshopName}
              shopId={goodsData.weappShopId}
            />
            <SettlementVegetables
              goodsImage={Api.BaseUrl + goodsData.goodsImageFirst}
              goodsName={goodsData.weappGoodsName}
              goodsDesc={goodsData.weappGoodsDesc}
              goodsSellingPrice={goodsData.weappGoodsSellingPrice}
              goodsNum={buyNum}
              showOperate={false}
            />
            <View className='freight'>
              <Text className='freight-text'>运费</Text>
              <Text className='freight-input'>&yen; {totalFare} 元</Text>
            </View>
            <View className='common'>
              <Text className='common-text'>订单备注</Text>
              <Input className='common-input' placeholder='选填请和商家协商一致'
                onInput={(text) => {
                  console.log("text", text.currentTarget.value)
                  goodsData.weappGoodsOrderRemark = text.currentTarget.value
                }} />
            </View>
            <View className='sum'>
              <Text className='sum-count'>共{buyNum}件</Text>
              <Text className='sum-text'>小计:</Text>
              <View className='sum-price-box'>
                <Text className='sum-price'>&yen; {totalPrice} 元</Text>
                <Text className='sum-fare'>(含运费:&yen; {totalFare} 元)</Text>
              </View>
            </View>
          </View>
        }
        return <View className='vegetables'>{content}</View>;
      }
    

    子组件代码如下:

    export default class SettlementVegetables extends Component {
      static defaultProps = {
        goodsImage: 'https://eluzh.oss-cn-beijing.aliyuncs.com/tomato.png',
        goodsName: '山东寿光优质无公害特级新鲜西 红柿',
        goodsDesc: '新鲜美味,口感酸甜',
        goodsSellingPrice: 60.00,
        goodsNum: 0,
        addGoodsCart: function () {
          console.log("点击了新增购物车")
        },
        subtractGoodsCart: function () {
          console.log("点击了减少购物车")
        },
        showOperate: true
    
      }
    
      render() {
        let { goodsImage, goodsName, goodsDesc, goodsSellingPrice } = this.props
        let { addGoodsCart, subtractGoodsCart, goodsNum, showOperate } = this.props
        return (
          <View className='item-main'>
            <View className='item-main-left'>
              <Image className='item-main-left-image' src={goodsImage} lazyLoad={true} />
            </View>
            <View className='item-main-right'>
              <Text className='item-main-right-name' style={{ display: '-webkit-box', overflow: 'hidden', '-webkit-line-clamp': 2, '-webkit-box-orient': 'vertical' }} numberOfLines={2}>{goodsName}</Text>
              <Text className='item-main-right-desc' style={{ display: '-webkit-box', overflow: 'hidden', '-webkit-line-clamp': 1, '-webkit-box-orient': 'vertical' }} numberOfLines={1}>{goodsDesc}</Text>
              <View className='item-main-right-price'>
                <View className='item-main-right-price-left'>
                  <Text className='item-main-right-price-left-money'>&yen;{goodsSellingPrice}</Text>
                  <Text className='item-main-right-price-left-unit'>/斤</Text>
                </View>
                {showOperate && <View className='item-main-right-price-right'>
                  <Text className='item-main-right-price-right-subtraction' onClick={subtractGoodsCart}>-</Text>
                  <Text className='item-main-right-price-right-number'>{goodsNum}</Text>
                  <Text className='item-main-right-price-right-add' onClick={addGoodsCart}>+</Text>
                </View>}
                {!showOperate && <View className='item-main-right-price-right'>
                  <Text className='item-main-right-price-right-number'>x{goodsNum}</Text>
                </View>}
    
              </View>
            </View>
          </View>
        )
      }
    }
    

    现象如下:
    7e7d264e-f401-4c60-95c1-212580bf7d14-image.png


登录后回复