小程序三目运算符编译出错,编译后的文件逻辑与期望的不符合,导致编辑器报错复现步骤
{
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