小程序渲染层错误

[vimcaw]

问题描述

当我试图编写一个根据属性切换试图的组件时，出现小程序渲染层错误。

复现步骤

export default class ActionBar extends Component {
  constructor(props)
  {
    super(props);
    this.state = {}
  }
  
  static defaultProps = {
    type: 'goods',
    navBtn: [],
    onAddToCart: () => {
    },
    onPurchase: () => {
    }
  };
  
  static gotoLink(url) {
    Taro.navigateTo({
      url
    })
  }
  
  render() {
    let content, btnList, navBtn;
    
    if (this.props.navBtn) {
      btnList = this.props.navBtn.map(item => {
        let className = 'iconfont icon-' + item.icon;
        return (
          <View
            onClick={ActionBar.gotoLink.bind(this, item.url)}
            key={item.icon}
          >
            <Text className={className} />
          </View>
        )
      });
      navBtn = <View className='nav-btn'>{btnList}</View>;
    }
    
    if (this.props.type === 'goods') {
      content = (
        <View>
          {navBtn}
          <View className='right'>
            <Button onClick={this.props.onAddToCart}>加入购物车</Button>
            <Button onClick={this.props.onPurchase}>立即购买</Button>
          </View>
        </View>
      )
    } else if (this.props.type === 'addToCart') {
      content = (
        <View>
          <View className='right'>
            <Button onClick={this.props.onAddToCart}>加入购物车</Button>
          </View>
        </View>
      )
    } else if (this.props.type === 'purchase') {
      content = (
        <View>
          <View className='right'>
            <Button onClick={this.props.onPurchase}>立即购买</Button>
          </View>
        </View>
      )
    } else if (this.props.type === 'order') {
      content = (
        <View>
          <View className='right'>
            <Price price={this.props.price} />
          </View>
        </View>
      )
    }
    return (
      <View className='action-bar'>{content}</View>
    )
  }
}

期望行为

根据type 属性切换不同的视图。

报错信息

当this.props.type === 'goods'和this.props.type === 'order'时，一切正常。

当this.props.type === 'addToCart'和this.props.type === 'purchase'时，小程序会报错：

• 第一次报错：Error: Expect FLOW_MINIPULATE_CHILD but get another

• 第二次报错：Error: Expect END descriptor with depth 0 but get another

• 第三次以后，虽然不再报错，但是此组件不再被渲染。

系统信息

操作系统: Windows 10
Taro 版本 v1.0.0.beta.7
Node.js 版本 v8.11.2

补充信息

修改成这样又正常了：

export default class ActionBar extends Component {
  constructor(props)
  {
    super(props);
    this.state = {}
  }
  
  static defaultProps = {
    type: 'goods',
    navBtn: [],
    onAddToCart: () => {
    },
    onPurchase: () => {
    }
  };
  
  static gotoLink(url) {
    Taro.navigateTo({
      url
    })
  }
  
  render() {
    let content, btnList, navBtn;
    
    if (this.props.navBtn) {
      btnList = this.props.navBtn.map(item => {
        let className = 'iconfont icon-' + item.icon;
        return (
          <View
            onClick={ActionBar.gotoLink.bind(this, item.url)}
            key={item.icon}
          >
            <Text className={className} />
          </View>
        )
      });
      navBtn = <View className='nav-btn'>{btnList}</View>;
    }
    
    if (this.props.type === 'order') {
      content = (
        <View>
          <View className='right'>
            <Price price={this.props.price} />
          </View>
        </View>
      )
    } else {
      content = (
        <View>
          {navBtn}
          <View className='right'>
            {
              (this.props.type === 'addToCart' || this.props.type === 'goods')
              && <Button onClick={this.props.onAddToCart}>加入购物车</Button>
            }
            {
              (this.props.type === 'purchase' || this.props.type === 'goods')
                && <Button onClick={this.props.onPurchase}>立即购买</Button>
            }
          </View>
        </View>
      )
    }
    
    return (
      <View className='action-bar'>{content}</View>
    )
  }
}

[Simbachen]

我本地测试了一下你的代码，没有复现报错。
怀疑是触发了小程序的偶发问题Expect END descriptor with depth 1

[zacksleo]

if else 会触发这个问题（也许是 if, elif, else的问题, 里面又使用了自定义组件），建议调整简化下 if else 的结构

[vimcaw]

更新到后面的 Taro 版本后，此问题解决。

[youngluo]

taro 1.3.0 依然存在

[youngluo]

taro 1.3.0 依然存在

解决这个又引出了另一个

@luckyadam