javascript - 条件渲染不能防止渲染

Question

我有这段代码:

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 &&会保护我，但不会。我遇到这个 typescript 错误:

TypeError: Cannot read property 'concat' of undefined

在 Angular 世界中，我会写 <div *ngIf="document.lines">在 vue 世界中我会写 <div v-if="document.lines"> 。我想我错过了一些与 react 有关的东西。

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

Answer 1

通过这种方式，你的守卫只检查 document.lines 是否存在，而不检查它是否是一个数组。

改变你的警惕:

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