reactjs - 无法读取 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

无法读取空错误消息的属性“公司”
很明显，“公司”对象为空(可能用于初始渲染)
并且您收到错误是因为您正在访问 null 对象上的属性。
在 TypeScript 的情况下，您可以使用，
简介？。公司 .
它被称为可选链
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chaining
但是在普通的JS中，我们必须使用 如果 声明并检查空情况。
对于上面的示例，您的模板完全取决于配置文件。
因此，最初本身会检查配置文件的值，如果该值未定义/为空，则返回一个空模板。

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