コンポーネント内のNullオブジェクトプロパティ値の処理

Question

ユーザーが自分のコンポーネント内で使用されているJSONオブジェクトに付加された値を定義していない可能性があるインスタンスを処理する最適な方法を判断しようとしています。 nullが存在し、コンポーネントのロードを妨げるエラーをスローするインスタンスを処理するために3次コマンドを使用する必要がありますか？これらのシナリオのベストプラクティスはありますか？それを行うには良い方法は、デフォルト値でdestructuringを使用することです

Uncaught TypeError: Cannot read property 'categoryName' of null 

Answer 1

：

const RecordCard = props => { 
    return (
      <div className="record-container"> 
       <RecordDate type={props.type} date={props.recordDateSlug} /> 
       <RecordHead linkId={props.recordIdHash} title={props.title} category={props.category.categoryName} user={props.synotate_user.fullNameSlug} picture={props.synotate_user.picture} dataDate={props.dataDateRangeSlug}/> 
       <hr /> 
       <RecordBody discovery={props.discovery} /> 
       <RecordFooter reports={props.record_reports} files={props.record_files}/> 
       <EditRecord linkId={props.recordIdHash} recordUser={props.user} user={props.user.userId} /> 
       <hr /> 
      </div> 
    ) 
} 

私category={props.category.categoryName}はのエラーがスローされます。 categoryだけ不定となり、エラーをスローしません、それがなかった場合は空のオブジェクトをデフォルトとし、その後categoryNameます：

const RecordCard = ({ 
    category: { 
    categoryName 
    } = {}, 
    synotate_user: { 
    fullNameSlug, 
    picture 
    } = {}, 
    user, 
    dataDateRangeSlug, 
    title, 
    recordIdHash, 
    type, 
    recordDateSlug, 
    discovery, 
    record_reports, 
    record_files 
}) => { 
    const { 
    userId 
    } = user; 
    return (
    <div className="record-container"> 
     <RecordDate type={type} date={recordDateSlug} /> 
     <RecordHead linkId={recordIdHash} title={title} category={categoryName} user={fullNameSlug} picture={picture} dataDate={dataDateRangeSlug}/> 
     <hr /> 
     <RecordBody discovery={discovery} /> 
     <RecordFooter reports={record_reports} files={record_files}/> 
     <EditRecord linkId={recordIdHash} recordUser={user} user={userId} /> 
     <hr /> 
    </div> 
); 
}