Почему этот 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>