三元表达式下使用自定义组件出现props未定义的错误

[ZodiacSyndicate]

问题描述

三元表达式下，当条件为true时使用某个自定义组件，当为false时不使用此组件。渲染的表现正常，但是会抛出该组件的props未定义错误。

复现步骤

row.jsx

export default class IRow extends Taro.Component {
  render() {
    return <View className='row'>{this.props.children}</View>
  }
}

col.jsx

export default class ICol extends Taro.Component {
  render() {
    const { span, offset } = this.props
    const classname = cx(
      'col',
      `col-span-${span}`,
      {[`col-offset-${offset}`]: !!offset}
    )
    return (
      <View className={classname}>{this.props.children}</View>
    )
  }
}

card.jsx

export default class ICard extends Taro.Component {
  render() {
    const {
      full,
      thumb,
      title,
      footer,
      body,
      bodyEnd
    } = this.props
    const classname = cx('card', {'card-full': full})
    return (
      <View className={classname}>
        <View className="card-header">
          <View className="card-header-content">
            {!!thumb ? <Image className='card-header-thumb' src={thumb} mode='aspectFit' /> : null}
            <Text className='card-header-title'>{title}</Text>
          </View>
          <View className="card-header-extra">{this.props.children}</View>
        </View>
        {
          !!footer ? (
            <block>
              <View className='card-body'>{body}</View>
              <View className='card-footer'>{footer}</View>
            </block>
          ) : (
            <block>
              <View className='card-body'>
                <IRow>
                  <ICol span={20}>
                    <View className='font-12 c-red'>{body}</View>
                  </ICol>
                  <ICol>
                    <View className='font-12 c-gray right'>{bodyEnd}</View>
                  </ICol>
                </IRow>
              </View>
            </block>
          )
        }
      </View>
    )
  }
}

shop.jsx

render() {
    const { shops } = this.props.shops
    return (
      <View className='container'>
        {shops.map(item => {
          return <IPanel
            key={item._id}
            title={item.name}
          >
            {item.shops.map(shop => {
              return <View key={shop._id} className='card-wrapper'>
                <ICard
                  thumb={shop.imgurl}
                  title={shop.name}
                  body={`地址：${shop.address}`}
                  footer={`电话：${shop.phone}`}
                >
                  <Label className="iconfont c-blue font-28 icon-phone" />
                </ICard>
              </View>
            })}
          </IPanel>
        })}
      </View>
    )
  }

shop.jsx中，对card组件传递了footer的props，从而!!footer为true，因此不会渲染col与row组件。

期望行为
正常渲染无报错

报错信息
VM2860:1 thirdScriptError
Cannot read property 'props' of undefined; [Component] Lifetime Method Error @ components/row/index#ready
TypeError: Cannot read property 'props' of undefined
at updateComponent (http://127.0.0.1:48696/appservice/npm/@tarojs/taro-weapp/dist/index.js:1869:24)
at c.ready (http://127.0.0.1:48696/appservice/npm/@tarojs/taro-weapp/dist/index.js:1834:9)
at r.safeCallback (http://127.0.0.1:48696/appservice/__dev__/WAService.js:17:14313)
at r.call (http://127.0.0.1:48696/appservice/__dev__/WAService.js:17:14077)
at a.p.triggerLifeTime (http://127.0.0.1:48696/appservice/__dev__/WAService.js:18:21981)
at Array. (http://127.0.0.1:48696/appservice/__dev__/WAService.js:19:29757)
at http://127.0.0.1:48696/appservice/__dev__/WAService.js:19:25466
at p (http://127.0.0.1:48696/appservice/__dev__/WAService.js:19:27514)
at http://127.0.0.1:48696/appservice/__dev__/WAService.js:19:26815
at n (http://127.0.0.1:48696/appservice/__dev__/WAService.js:5:1819)

VM2860:1 thirdScriptError
Cannot read property 'props' of undefined; [Component] Lifetime Method Error @ components/col/index#ready
TypeError: Cannot read property 'props' of undefined
at updateComponent (http://127.0.0.1:48696/appservice/npm/@tarojs/taro-weapp/dist/index.js:1869:24)
at c.ready (http://127.0.0.1:48696/appservice/npm/@tarojs/taro-weapp/dist/index.js:1834:9)
at r.safeCallback (http://127.0.0.1:48696/appservice/__dev__/WAService.js:17:14313)
at r.call (http://127.0.0.1:48696/appservice/__dev__/WAService.js:17:14077)
at a.p.triggerLifeTime (http://127.0.0.1:48696/appservice/__dev__/WAService.js:18:21981)
at Array. (http://127.0.0.1:48696/appservice/__dev__/WAService.js:19:29757)
at http://127.0.0.1:48696/appservice/__dev__/WAService.js:19:25466
at p (http://127.0.0.1:48696/appservice/__dev__/WAService.js:19:27514)
at http://127.0.0.1:48696/appservice/__dev__/WAService.js:19:26815
at n (http://127.0.0.1:48696/appservice/__dev__/WAService.js:5:1819)

每一次循环card组件，第一个错误就会出现一次，第二个错误出现两次，组件中的col与row未被渲染

系统信息

• 操作系统: [Windows 10]
• Taro 版本 [v1.0.0-beta.1]
• Node.js 版本 [v8.11.3]

补充信息

有可能是因为即使自定义组件没有渲染也会在组件ready的时候获取自己的props导致报错。

[ZodiacSyndicate]

附加信息

经测试，这个报错只会在循环组件时才会出现，当没有使用map循环渲染时，使用三元表达式不会出现报错