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

条件呈现不保护渲染

typescript reactjs javascript

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 年前

quirimmo 7 年前

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

将您的防护设置为:

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

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案例处理正确)。

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前