为什么这个 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

returns 屏幕上出现此错误消息：

TypeError: Cannot read property 'city' of undefined

是否还在加载 return 未定义的道具？

Answer 1

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

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

为什么这个 React 条件渲染有问题？

Why this React conditional rendering has issue?

javascript

reactjs

react-props