Javascript 未捕获的TypeError:无法读取未定义的属性“username”

我得到未捕获的TypeError：当我导航到外部页面并尝试返回时，无法读取未定义的属性“username”。在render时，它会命中else语句，其中我返回false。有没有办法避免抛出此错误

render() {
        const videos = this.randomHomeList();
        const users = this.props.users;
        const videoList = videos.map(video => {
            if (video) {
                const owner = users.filter(user => user.id === video.owner_id)
                if (owner) { 
                    const videoOwner = owner.find(user => user.username)
                    return (
                        <ul key={video.id} >
                            <div className="home-list-item">
                                <div className="home-video-header">
                                    <h2 className="home-video-header-1">Added to</h2>
                                    <h2 className="home-video-header-2">Foxeo Staff Picks</h2>
                                </div>
                                <Link to={`/play/${video.id}`}>
                                    <video 
                                        className="home-video"
                                        src={video.video_url}
                                        poster=""
                                        width="320" 
                                        height="240"
                                        >    
                                    </video>
                                </Link>
                                <h2 className="video-title">{video.video_title}</h2>
                                <h2 className="video-upload-date">uploaded {this.dateCreated(video.created_at)}</h2>
                                <h2 className="video-owner-name">{videoOwner.username}</h2>
                            </div> 
                        </ul>
                    )
                } else {
                    return false;
                }
            }
        })

---

您可以将支票放在此处，然后执行以下操作：

 <h2 className="video-owner-name">{videoOwner ? videoOwner.username : ""}</h2>

---

您可以将支票放在此处，然后执行以下操作：

 <h2 className="video-owner-name">{videoOwner ? videoOwner.username : ""}</h2>

---

您可以使用类型安全运算符

?？是安全导航操作员。它检查变量在模板中是否为null或未定义。如果为null且未定义，则该值不会引发错误

 <h2 className="video-owner-name">{videoOwner?.username}</h2>

第二种选择是使用三元运算符，正如前面的答案所建议的

 <h2 className="video-owner-name">{videoOwner ? videoOwner.username : ""}</h2>

---

您可以使用类型安全运算符

?？是安全导航操作员。它检查变量在模板中是否为null或未定义。如果为null且未定义，则该值不会引发错误

 <h2 className="video-owner-name">{videoOwner?.username}</h2>

第二种选择是使用三元运算符，正如前面的答案所建议的

 <h2 className="video-owner-name">{videoOwner ? videoOwner.username : ""}</h2>

---

@用户13790968如果答案对您有帮助，请单击答案旁边的勾号接受答案。谢谢：请点击答案旁边的勾号接受答案。谢谢：@user13790968如果答案对你有帮助，请点击答案旁边的勾号接受答案。谢谢：请点击答案旁边的勾号接受答案。谢谢您：？。也称为可选链接。？。也称为可选链接。