反应：未捕获的类型错误：无法读取未定义的属性（读取“charAt”）

Question

我正在尝试使用在 useEffect Hook 之后声明的 function（称为 capitalizeFirstLetter(string)）将组件渲染中移动导航标题的首字母大写。 当我不使用 function 时，我从 redux (property.category) 获取数据并将其分派到组件中，没有任何问题。但是，当我将 function 与数据 {capitalizeFirstLetter(property.category)} 一起使用时，我得到：未捕获的类型错误：无法从控制台读取未定义的属性（读取“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

Answer 1

它给出了错误，因为 propertyDetails 很可能没有在第一次渲染时完成加载。

你有很多策略来处理这个问题，但你需要有条件地渲染字符串或整个组件。

例如：

  return (
    <div className="property-screen">

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