React条件渲染异常排查：为何出现读取未定义属性错误？

嘿，我一眼就揪出问题啦！你这里犯了一个很容易忽略的小错误——你做空值检查的变量和实际渲染时用的变量根本不是同一个！

咱们来拆解下：
你已经把props.teamData赋值给了team变量，还贴心做了!team || team.length < 1的加载判断，但下面渲染的时候却写了props.team.city和props.team.name！这个props.team完全没经过任何空值校验，而且从你注释的team打印结果来看，city和name明明是在team这个对象里的，根本不是props.team。

另外还有两个小细节要修正：

1. 你的team是个对象，用team.length < 1判断空值不合适，换成Object.keys(team).length === 0更准确；
2. 背景图的属性你写成了styles（多了个s），而且反引号里的图片路径没闭合单引号，这也是潜在的语法问题。

修改后的代码如下：

import React from 'react'
import styles from '../articles.css'
const TeamNfo = props => {
  const team = props.teamData
  // console.log( team)
  return !team || Object.keys(team).length === 0 ? <p>Loading ...</p> : (
    <>
      {console.log(team)}
      <div className={ styles.articleTeamHeader }>
        <div className={ styles.left } style={{ background: `url('images/teams/${team.logo}')` }}>
        </div>
        <div className={ styles.right}>
          <div>
            <span> { team.city } { team.name } </span>
          </div>
        </div>
      </div>
    </>
  )
}
export default TeamNfo

总结一下：以后做空值判断时，一定要确保判断的变量和实际渲染用的变量完全一致，不然就会出现这种“明明检查了还是报错”的尴尬情况～

内容的提问来源于stack exchange，提问作者Amir Meyari