页面与组件之间的传递，会存在props丢失的情况

[MuJinYan]

问题描述
子组件从页面组件中接受信息，但props有一定几率会丢失

复现步骤

import Taro, { Component } from '@tarojs/taro'
import { View, Block } from '@tarojs/components'
import { connect } from '@tarojs/redux'
import { SeparatorBar, ShowMore } from '@/components'
import * as R from 'ramda'
import ProductItem from './ProductItem'
import Star from './Star'
import styles from './MerchantsItem.module.scss'

@connect(({groupbuy: {merchants}}, props) => {
  const { itemId } = props
  return {
    merchant: R.find(R.propEq('id', itemId), merchants)
  }
})
export default class MerchantsItem extends Component {
  state = {
    isShowMore: false
  }

  shouldComponentUpdate (nextProps) {
    return !R.equals(this.props.merchant, nextProps.merchant)
  }

  handleChangeShowMore = () => {
    this.setState({isShowMore: true})
  }

  goMerchants = (e) => {
    const {item} = e.currentTarget.dataset
    this.$preload('merchant', item)
    Taro.navigateTo({url: `/pages/groupbuy/merchants?id=${item.id}`})
  }

  render () {
    console.log(this.props.itemId)
    console.log('==============')
    const { merchant } = this.props
    const { group_products_with_order = [], name, star_level, rate } = R.defaultTo({}, merchant)
    const {isShowMore} = this.state
    const groupProductsArr = isShowMore ? group_products_with_order : R.slice(0, 2, group_products_with_order)
    return (
      <Block>
        <View className={styles.mercWarp}>
          <View className={styles.mercdtlList} data-item={merchant} onClick={this.goMerchants}>
            <View className={styles.title}>{name}</View>
            <Star rate={rate} star_level={star_level} />
          </View>
          {groupProductsArr.map((productItem) => {
            const merchant_info = R.pick([
              'id', 'address', 'name', 'rate', 'phone', 'image',
              'city', 'province', 'lng', 'lat', 'tax_rate'
            ], merchant)

            return <ProductItem
              key={`product${productItem.id}`}
              item={productItem}
              differentGo
              merchant_info={merchant_info}
              onOpenModal={this.props.onOpenModal}
            />
          })}
        </View>
        {group_products_with_order.length > 2
        && !isShowMore
        && <Block>
          <SeparatorBar color='#F4F4F4' height={1} />
          <ShowMore msg={`查看其他${group_products_with_order.length - 2}张`} onClick={this.handleChangeShowMore} />
        </Block>}
        <SeparatorBar color='#F6F6F6' />
      </Block>
    )
  }
}

/*
* 采用原生小程序的下拉刷新，上拉加载
* 所以这种实际是采用的page的滚动
* 自定义下拉刷新，上拉加载会由于计算问题在android有明显的卡顿，故不进行采取
* */

import Taro, { Component } from '@tarojs/taro'
import { View, Image, Block } from '@tarojs/components'
import { connect } from '@tarojs/redux'
import * as R from 'ramda'
import {
  FantuanSearch,
  FantuanSwiper,
  FantuanFilter,
  FantuanFilterLayout,
  FullScreenLayer,
  LayerDivider,
  FantuanFailView,
  FantuanBlankView,
  LoadMore,
  LoadComplete,
  CustomModal
} from '@/components'
import { Action } from '@/utils/helpers'
import K from '@/utils/constants'
import placeholderImage from '@/images/groupbuy/placeholder-image.jpg'
import styles from './index.module.scss'
import MerchantsItem from '../common/MerchantsItem'
import UserLayout from '../home/userLayout'

@connect(({groupbuy, userInfo: {user}}) => {
  return {
    user: R.either(R.isNil, R.isEmpty)(user),
    ...R.omit([
      'merchant',
      'merchantRelated',
      'product',
      'regions',
      'secondaryType'
    ],groupbuy)
  }
})
export default class Groupbuy extends Component {
  config = {
    navigationBarTitleText: '饭团点评享惠',
    
    usingComponents: {
      'sticky': '/components/wechatComponent/sticky/index', // 使用的原生组件
      'sticky-item': '/components/wechatComponent/sticky-item/index'
    },
    enablePullDownRefresh: true,
    backgroundTextStyle: 'dark',
    onReachBottomDistance: 50
  };
  
  state = {
    scrollTop: 0,
    reachBottom: false,
    filterType: null,
    tag: false  // 防止多次触发下拉刷新
  }
  
  componentDidMount () {
    this.getData()
  }
  
  getData = (options = {}) => {
    this.props.dispatch(Action('groupbuy/fetchData', options))
    this.props.dispatch(Action('groupbuy/fetchAd'))
  }
  
  onPageScroll (event) {
    this.setState({
      scrollTop: event.scrollTop
    })
  }
  
  onPullDownRefresh() {
    if (!this.state.tag) {
      this.setState({tag: true})
      this.getData({
        status: K.PAGE_STATUS.STOPPENDING,
        callback: () => {
          this.setState({
            tag: false
          })
          Taro.stopPullDownRefresh()
        }
      })
    } else {}
  }
  
  onReachBottom() {
    const { headers: { has_more } } = this.props
    if (has_more) {
      this.setState({reachBottom: true})
      this.props.dispatch(Action('groupbuy/_loadMore'))
    } else {
      this.setState({reachBottom: false})
    }
  }
  // 改变弹窗类型，所有的弹窗均是基于一个弹出层，不同的只有内部的内容
  changeFloatLayout = (value) => {
    this.setState({
      filterType: value
    })
  }
  // 点抢购判断登录，未登录直接弹窗要求登录
  openLoginModal = (callback) => {
    const { user } = this.props
    if (user) {
      this.loginModal.open()
    } else {
      callback && callback()
    }
  }
  goSearchPage = () => {
    const { STATUS } = this.props
    if (R.includes(STATUS, [K.PAGE_STATUS.RESOLVED, K.PAGE_STATUS.BLANK])) {
      Taro.navigateTo({url: '/pages/search/groupBuySearch'})
    } else { return false }
  }
  
  render() {
    const { scrollTop, reachBottom, filterType } = this.state
    const { ads: { adType9 }, merchants, STATUS, headers: {has_more} } = this.props
    console.log(merchants)
    return (
      <Block>
        <FantuanSearch isFixed onClick={this.goSearchPage} />
        {
          {
           [K.PAGE_STATUS.INITIAL]: <View />,
           [K.PAGE_STATUS.PENDING]: <View>
              <View className={styles.placeholderView} />
              <Image className={styles.groupPlaceholderImage} mode='aspectFill' src={placeholderImage} />
              <View className={styles.placeholerFilter}>
                <View className={styles.placeholder}>
                  <View />
                </View>
                <View className={styles.placeholder}>
                  <View />
                </View>
                <View className={styles.placeholder}>
                  <View />
                </View>
                <View className={styles.placeholder}>
                  <View />
                </View>
              </View>
           </View>,
           [K.PAGE_STATUS.RESOLVED]: <sticky scrollTop={scrollTop}>
             <View className={styles.placeholderView} />
             <FantuanSwiper imageList={adType9} photoKey='photo' />
             <sticky-item>
               <View slot='title'>
                 <FantuanFilter
                   filterCondition={this.props.filterCondition}
                   filterConditionShow={this.props.filterConditionShow}
                   onClick={this.changeFloatLayout}
                 />
               </View>
               <View slot='content'>
                 {merchants.map((item) => {
                   const itemId = item.id
                   return <MerchantsItem
                     key={`card${itemId}`}
                     itemId={itemId}
                     onOpenModal={this.openLoginModal}
                   />
                 })}
                 {(reachBottom && has_more) && <LoadMore />}
                 {R.not(has_more) && <LoadComplete />}
               </View>
             </sticky-item>
           </sticky>,
           [K.PAGE_STATUS.REJECTED]: <FullScreenLayer>
             <LayerDivider height={1}>
               <FantuanFailView onClick={this.getData} />
             </LayerDivider>
           </FullScreenLayer>,
           [K.PAGE_STATUS.BLANK]: <View>
             <View className={styles.placeholderView} />
             <FantuanSwiper imageList={adType9} photoKey='photo' />
             <FantuanFilter
               filterCondition={this.props.filterCondition}
               filterConditionShow={this.props.filterConditionShow}
               onClick={this.changeFloatLayout}
             />
             <View>
               <FantuanBlankView />
             </View>
           </View>
          }[STATUS]
        }
        <FantuanFilterLayout source='groupbuy' type={filterType} onClose={this.changeFloatLayout} />
        <UserLayout onLogin={this.goLogin} />
        <CustomModal
          ref={(node) => this.loginModal = node}
          type='confirm'
          message='需要登录才可以下单哦~'
          confirmIsLogin
        />
      </Block>
    )
  }
}

期望行为
props不丢失

报错信息

系统信息

• 操作系统: mac os 10.13.6
• Taro 版本 1.3.10
• Node.js 版本 8.12.0
• 报错平台 weapp

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[taro-bot]

CC @Chen-jj

[Chen-jj]

@MuJinYan CLI 与依赖版本是否一致？都升级到 1.3.11 再试试，如还有问题请更新一份最小可复现代码或直接扔 demo

[MuJinYan]

@Chen-jj cli和依赖版本都是一致的，升级到1.3.11我这边会存在一个枚举类型写法的问题，我将尝试抽离一份可复现代码

[Vegisau]

1.3.12也还是这样。。。

[Chen-jj]

1.3.12也还是这样。。。

No code no talk.

[shenghanqin]

@Chen-jj cli和依赖版本都是一致的，升级到1.3.11我这边会存在一个枚举类型写法的问题，我将尝试抽离一份可复现代码

我现在针对这种属性丢失的情况，
一方面会看tarojs源码，因为tarojs的属性传递可能有问题
另一方面，我可能会写一个原生微信小程序，看是不是微信小程序diff算法有问题。

之前就用这个方法发现过字节跳动小程序的diff算法问题。

[taro-bot]

Hello~

您的问题我们无法复现。如果有空的话还请拔冗提供一个简单的复现 demo，否则这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~