React报错：Uncaught TypeError: 无法读取undefined的charAt属性

问题场景 #

尝试在组件渲染时用capitalizeFirstLetter函数把Redux中property.category的首字母大写，不调用该函数时数据正常，但调用后控制台抛出Uncaught TypeError: Cannot read properties of undefined (reading 'charAt')，明明数据存在却报undefined。

相关代码 #

const PropertyScreen = () => {

  const params = useParams()
  console.log(params.id)

  const dispatch = useDispatch()

  const propertyDetails = useSelector(state => state.propertyDetails)
  const { loading, property, error } = propertyDetails

  useEffect(() => {
    dispatch(listPropertyDetails(params.id))
  }, [dispatch, params.id])

  function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
  }
  
  return (
    <div className="property-screen">

      <div className="mobile-navigation">
        <Link to={'#'} className='mobile-navigation-title'> {capitalizeFirstLetter(property.category)} </Link>
        <div className='navigation-icons'>
          <IconedButton icon={'faSearch'} />
          <IconedButton icon={'faHome'} link={'/'} />
        </div>
      </div>
    </div>
  )
}

export default PropertyScreen

问题原因 #

组件第一次渲染时，Redux的property还没被异步请求（listPropertyDetails）填充，此时property是undefined。调用capitalizeFirstLetter(property.category)时，先访问property.category就会因为property不存在报错，而且你的capitalizeFirstLetter函数没有处理传入参数为undefined的情况，后续调用charAt自然会触发类型错误。

解决办法 #

1. 利用loading状态控制渲染 #

在数据加载完成前，不渲染需要用到property的部分，或者显示占位内容：

return (
  <div className="property-screen">
    {loading ? (
      <div>加载中...</div>
    ) : (
      <div className="mobile-navigation">
        <Link to={'#'} className='mobile-navigation-title'> {capitalizeFirstLetter(property.category)} </Link>
        <div className='navigation-icons'>
          <IconedButton icon={'faSearch'} />
          <IconedButton icon={'faHome'} link={'/'} />
        </div>
      </div>
    )}
  </div>
)

2. 给函数添加容错处理 #

修改capitalizeFirstLetter，确保参数不存在时不会报错：

function capitalizeFirstLetter(string) {
  if (!string) return ''; // 如果string是undefined或空字符串，返回空
  return string.charAt(0).toUpperCase() + string.slice(1);
}

3. 使用可选链操作符 #

访问property.category时用可选链，避免property为undefined时报错：

<Link to={'#'} className='mobile-navigation-title'> {capitalizeFirstLetter(property?.category)} </Link>

可以结合这几种方法，比如先判断loading，同时给函数加容错，这样更稳妥。

内容的提问来源于stack exchange，提问作者Al.Salvador