Taro三目运算符编译错误,导致小程序开发者工具报错

1,330 阅读1分钟

小程序三目运算符编译出错,编译后的文件逻辑与期望的不符合,导致编辑器报错复现步骤

 {
              followAudio ?
              (<View>-----{followAudio}</View>):
              (<Block>
                {answers && answers.length > 0 && answers.map((item, i) => {
                  const {text,image	} = item
                  return (
                    <View className={`item dfR ${item.id === kidsCorrectId ? 'active' : ''}`} key={item.id}>
                      <View className={`l ${item.correct ? 'act' : ''} `}>
                        {questionZM[i]}
                      </View>
                      <View className='r dfR'>
                        {image &&
                          <View className='options-bg dfR'>
                            <Image src={image}></Image>
                          </View>
                        }
                        {text &&
                          <View className='text'>
                            {text}
                          </View>
                        }
                      </View>
                    </View>
                  )
                })}
              </Block>)
}

期望行为 编译出符合逻辑的代码

报错 Cannot read property 'map' of undefined

这里无视了三目运算之后的判断逻辑,直接编译成了!followAudio ? answers.map,导致没有获取到answers编辑器直接报错控制台报错 Cannot read property 'map' of undefined

var loopArray118 = !followAudio ? answers.map(function (item, i) {
        item = {
          $original: (0, _index.internal_get_original)(item)
        };

        var _item?original = item.$original,
            text = _item?original.text,
            image = _item?original.image;

        return {
          text: text,
          image: image,
          $original: item.$original
        };
      }) : [];

修复

把三目运算改为条件判断

<View className='bd'>
            {
              followAudio &&
              (<View>-----{followAudio}</View>)}
            {
              (<Block>
                {answers && answers.length > 0 && answers.map((item, i) => {
                  const {text,image	} = item
                  return (
                    <View className={`item dfR ${item.id === kidsCorrectId ? 'active' : ''}`} key={item.id}>
                      <View className={`l ${item.correct ? 'act' : ''} `}>
                        {questionZM[i]}
                      </View>
                      <View className='r dfR'>
                        {image &&
                          <View className='options-bg dfR'>
                            <Image src={image}></Image>
                          </View>
                        }
                        {text &&
                          <View className='text'>
                            {text}
                          </View>
                        }
                      </View>
                    </View>
                  )
                })}
              </Block>)
            }
          </View>

总结

小程序最终运行的还是dist目录,可能开发者未能考虑到这种判断。所以编写代码不能偷懒喽☺。

系统信息

taro 1.3.35