无法读取null的属性“ company”

Question

console.log(profile); 运行良好，并且显示了这一点。

但是当我使用console.log(profile.company);来获取公司名称时。 它显示了Cannot read property 'company' of null 错误消息。 如何解决这个错误？非常感谢您的帮助。

这是代码

import React,{Fragment,useEffect}from 'react'
import PropTypes from 'prop-types'
import Loading from "../layout/Loading.js"
import {connect} from "react-redux"
import {getProfileById} from "../../redux/profile/profileAction.js"
import { Link } from 'react-router-dom'

import ProfileTop from "./ProfileTop.js"
import ProfileAbout from "./ProfileAbout.js"
import ProfileExperience from "./ProfileExperience.js"
import ProfileEducation from "./ProfileEducation.js"
import ProfileGithub from "./ProfileGithub.js"

const Profile = ({getProfileById,match,profileData,loginData}) => {
    const {loading,profile}=profileData

    console.log(profile);         //works
    console.log(profile.company); //error occurred

    useEffect(()=>{
        getProfileById(match.params.userId)
    },[getProfileById,match.params.userId])
    return (
        <div style={{marginTop:"100px"}}>
            {
                profile ===null||loading? (<Loading/>):
                (<Fragment>
                    <Link to="/profiles" className="btn btn-light"> Back to profiles</Link>
                    {
                        (loginData.isAuthenticated && loginData.loading===false&&loginData.user_data.userid===match.params.userId) ? 
                        (<Link to="/edit-profile" className="btn btn-dark">Edit profile</Link>):null
                    }
                    <div className="profile-grid my-1">
                        <ProfileTop profile={profile}></ProfileTop>
                        <ProfileAbout profile={profile}></ProfileAbout>
                        <ProfileExperience profile={profile}></ProfileExperience>
                        <ProfileEducation profile={profile}></ProfileEducation>
                        <ProfileGithub profile={profile}></ProfileGithub>
                        {
                            profile.github_user_name===""? null:<ProfileGithub profile={profile}></ProfileGithub>
                        }

                    </div>
                </Fragment>)
            }
        </div>
    )
}

Profile.propTypes = {
    profileData:PropTypes.object.isRequired,
}

const mapStateToProps=(state)=>{
    return{
        profileData:state.profileData,
        loginData:state.loginData
    }
}

export default connect(mapStateToProps,{getProfileById})(Profile)

Answer 1

如评论中所述，浏览器控制台不会立即打印对象的内容。为此，您需要执行JSON.stringify(profile)之类的操作。

此外，我认为功能组件上的console.log很好，这将让您知道何时进行组件渲染（但不要太着迷于为什么组件如此频繁地渲染，渲染通常不贵）。

如果您使用的是最新版本的Create React App，则可以尝试可选的链接（？。）：

console.log(profile);         
console.log(profile?.company); // equivalent to (profile && profile.company)

// Or if you need to know the content exactly in the moment:
console.log(JSON.stringify(profile));

Answer 2

无法读取空错误消息的属性“ company”

很明显，“ company”对象为null（可能用于初始渲染） 并且由于访问空对象的属性而收到错误消息。

对于TypeScript，您可以使用

个人资料？。公司。

这称为可选链接 https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chaining

但是在普通的JS中，我们必须使用 if 语句并检查是否为空。

对于上述示例，您的模板完全取决于配置文件。 这样一来，它本身就可以检查配置文件的值，如果该值未定义/为空，则返回一个空模板。

if(!profile){
  return null;
}
return <Your template>