為什么這個React條件渲染有問題？

Question

道具數據由父元素提取。 結果延遲獲取它我檢查空或空道具和控制台日志是否正常：

import React from 'react'
import styles from '../articles.css'
const TeamNfo = props => {
    const team = props.teamData
    // console.log( team)

    return !team || team.length < 1
        ? <p>Loading ...</p>
        : <>
            {console.log(team)}
            {/* {
                city: "New Jersey"
                count: 0
                description: "At vero eos et accusamus et ."
                id: 3
                logo: "nets.png"
                name: "Nets"
                poll: "false"
                stats: Array(1)
                    0: {wins: 23, defeats: 12}
            } */}
            <div className={ styles.articleTeamHeader }>         
                <div className={ styles.left }
                    styles= {{
                        background: `url('images/teams/${ team.logo })`
                }}>
                </div>

                <div className={ styles.right}>
                    <div>
                        <span> { props.team.city } { props.team.name } </span>
                    </div>

                </div>
            </div>
        </>
}
export default TeamNfo

在屏幕上返回此錯誤消息：

TypeError: Cannot read property 'city' of undefined

是否仍然使用未定義的道具加載返回？

Answer 1

team是一個局部變量。 使用team.city或props.teamData.city ，例如：

<span> { team.city } { team.name } </span>
// or
<span> { props.teamData.city } { props.teamData.name } </span>