Taro: render 中条件判断丢失return

Created on 6 Mar 2019 · 10Comments · Source: NervJS/taro

问题描述
render 中条件判断失效, 会执行return之后的代码。

复现步骤

编译前：

render () {
    const { cropperOpt } = this.state;

    if (!cropperOpt) {
      return (<View className="page page-cropper"></View>);
    }

    // !!!!cropperOpt 为空时不应该执行这里
    console.log(cropperOpt.width)

    return (
      <View className="page page-cropper">
        <View className="cropper-wrapper">
          <Canvas
            className="cropper"
            disable-scroll="true"
            onTouchStart={ this.touchStart.bind(this) }
            onTouchMove={ this.touchMove.bind(this) }
            onTouchEnd={ this.touchEnd.bind(this) }
            style={{
              width: cropperOpt.width + 'px',
              height: cropperOpt.height + 'px',
              backgroundColor: 'rgba(0, 0, 0, 0.8)'
            }}
            canvas-id={ cropperOpt.id }
          >
          </Canvas>
          <Canvas
            class="cropper"
            disable-scroll="true"
            style={{
              position: 'fixed',
              top: 0 - cropperOpt.width * cropperOpt.pixelRatio + 'px',
              left: 0 - cropperOpt.height * cropperOpt.pixelRatio + 'px',
              width: cropperOpt.width * cropperOpt.pixelRatio + 'px',
              height: cropperOpt.height * cropperOpt.pixelRatio + 'px',
            }}
            canvas-id={ cropperOpt.targetId }
          >
          </Canvas>
        </View>
        <View class="cropper-buttons">
          <View
            class="getCropperImage ui-btn is-primary"
            onClick={ this.getCropperImage.bind(this) }
          >
            使用
          </View>
        </View>
      </View>
    )
  }

编译后：

{
    key: "_createData",
    value: function _createData() {
      this.__state = arguments[0] || this.state || {};
      this.__props = arguments[1] || this.props || {};
      var __runloopRef = arguments[2];
      ;

      var cropperOpt = this.__state.cropperOpt;


      if (!cropperOpt) {}

      // !!!!cropperOpt 为空时不应该执行这里
      console.log(cropperOpt.width);

      var anonymousState__temp = (0, _index.internal_inline_style)({
        width: cropperOpt.width + 'px',
        height: cropperOpt.height + 'px',
        backgroundColor: 'rgba(0, 0, 0, 0.8)'
      });
      var anonymousState__temp2 = (0, _index.internal_inline_style)({
        position: 'fixed',
        top: 0 - cropperOpt.width * cropperOpt.pixelRatio + 'px',
        left: 0 - cropperOpt.height * cropperOpt.pixelRatio + 'px',
        width: cropperOpt.width * cropperOpt.pixelRatio + 'px',
        height: cropperOpt.height * cropperOpt.pixelRatio + 'px'
      });
      Object.assign(this.__state, {
        anonymousState__temp: anonymousState__temp,
        anonymousState__temp2: anonymousState__temp2
      });
      return this.__state;
    }
  }

cropperOpt为null时，if (!cropperOpt) {} 本来应该返回，不执行后面的代码的，但是这里没有return。

所以报错：

VM3882:1 TypeError: Cannot read property 'width' of null

期望行为

if 逻辑正常

系统信息

Taro CLI 1.2.15 environment info:
    System:
      OS: macOS High Sierra 10.13.1
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.15.1 - ~/.nvm/versions/node/v10.15.1/bin/node
      npm: 6.4.1 - ~/.nvm/versions/node/v10.15.1/bin/npm

Source

ccqgithub

👍2

Most helpful comment

我也遇到了，返回编译后变为为 null，目前只能通过三元运算符和逻辑运算符解决

MikyChow on 23 Apr 2019

👍2

All 10 comments

欢迎提交 Issue~

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

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

Good luck and happy coding~

taro-bot[bot] on 6 Mar 2019

CC @yuche

taro-bot[bot] on 6 Mar 2019

这逻辑没毛病啊

wesleydotyang on 12 Mar 2019

@wesleydotyang 之前例子举的不好，已修改。
总之就是render函数里如果有 return jsx 的代码的话，按正常逻辑是执行到这一行就不会执行后面的代码了。
但Taro编译时将jsx提取出去作为模板的时候，整行都提出去了，return也一起消失了，所以本该return的地方没return，还是往后面继续执行了。

ccqgithub on 12 Mar 2019

👍1

我也遇到了，返回编译后变为为 null，目前只能通过三元运算符和逻辑运算符解决

MikyChow on 23 Apr 2019

👍2

请问这个问题现在什么进展了？