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

Question

Props 数据由父元素获取。导致获取它们的延迟我检查了空或空道具并且控制台日志正常：

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

它是否仍在使用未定义的道具加载退货？

标签： javascriptreactjsreact-props

Answer 1

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

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