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 &&将保护我，但不会。我遇到此打字稿错误：

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

在有角世界中，我会写<div *ngIf="document.lines">，在有色世界中，我会写<div v-if="document.lines">。我想我缺少一些反应。

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

Answer 1

通过这种方式，您的警卫人员只会检查document.lines是否存在，而不会检查它是否是数组。

将警卫更改为：

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

Answer 2

您是否将代码包装在{ ... }中？如果没有他们，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，它是用堆叠闪电制造的。（您可以将行设置为undefined，以表明错误的情况得到了正确处理。）

条件渲染无法防止渲染

2 个答案: