反応成分中の消散と小道具の使用

Question

私はtotal_countsを親から子成分に渡しているといいます。私の子供のコンポーネントで

私は方法私は、エラーなしで正常にtotal_countsを使用するにはどうすればよい

render() { 
    console.log(this.props.pagination.total_counts) 
} 

をレンダリングしていますか？私のレンダリングメソッドの子どもたちは、ページ番号がhttp呼び出しを介して来たので、複数回レンダリングすることがあります。私は

const { total_counts } = this.props.pagination 
render(){ 
    return (
     <div>{total_counts && <p>{total_counts.toString()}</p>}</div> 
    ) 
} 

以下のようにdesctructringない場合、私はまだtotal_countsをチェックする必要がありますがthis.props.paginationからtotal_countsにアクセスしている場合は、非構造文はこのようにする必要があり、未定義

Answer 1

ではありません。

const { total_counts } = this.props.pagination; 

これは、ページネーションが決して定義されないことを前提としています。それ以外の場合は、まずそれをチェックし、存在しなければ何らかの値にフォールバックすることをお勧めします。あなたの質問が正確に何であるか

// default value if this.props.pagination is undefined 
 
let total_counts = 0; 
 

 
// if this.props.pagination and total_counts property in it exist 
 
// then assign total_counts variable 
 
if (this.props.pagination && this.props.pagination.total_counts) { 
 
    total_counts = this.props.pagination.total_counts; 
 
}