代码之家 › 专栏 › 技术社区 › aloisdg

条件呈现不保护渲染

typescript reactjs javascript

0

aloisdg · 技术社区 · 7 年前

document.lines && (<div>
                    <h4>Title1</h4>
                    {
                        document.lines
                            .concat(["end"])
                            .filter(Boolean)
                            .map((line, i) =>
                                <p key={i}>{line}</p>
                            )
                    }
                </div>)

一切都很好的时候 document.lines document.lines && 将保护我,但不会。我面临以下类型脚本错误:

TypeError:无法读取未定义的属性“concat”

在这个有棱角的世界里,我会写作 <div *ngIf="document.lines"> 在vue的世界里,我会写作 <div v-if="document.lines"> . 我想我错过了一些东西。

为什么我的守卫没有保护我?如何更改代码以避免问题?

2 回复 | 直到 7 年前

1

quirimmo 7 年前

这样你的警卫就可以检查 document.lines

将您的防护设置为:

Array.isArray(document.lines) && ...

2

0

aloisdg 7 年前

你把代码包在里面了吗 { ... } document.lines && 将由react以普通html形式读取( demo of this behavior ).

试试这个:

{
    document.lines && <div>
                    <h4>Title1</h4>
                    {
                        document.lines
                            .concat(["end"])
                            .filter(Boolean)
                            .map((line, i) =>
                                <p key={i}>{line}</p>
                            )
                    }
                </div>
}

Working demo 用stackblitz制作。(您可以将lines设置为undefined,以表明falsy案例处理正确)。