未捕獲的類型錯誤：無法讀取未定義的屬性“用戶名”

Question

當我導航到外部頁面並嘗試返回 go 時，我得到 Uncaught TypeError: Cannot read property 'username' of undefined。 在渲染時，它會遇到我返回 false 的 else 語句。 有沒有辦法避免這個錯誤被拋出？

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;
                }
            }
        })

Answer 1

您可以在此處進行檢查並執行以下操作：

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

Answer 2

您可以使用類型安全運算符。

? 是安全導航操作員。 它檢查變量是 null 還是在模板中未定義。 在 null 和未定義的情況下，該值不會引發錯誤。

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

第二個選項是使用前面答案中建議的三元運算符。

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