空の小道具についての警告：なぜそれが起こるのですか？

Question

Iレンダリングする前に、サーバーのデータをフェッチする必要があるコンポーネント、持っている：あなたが見ることができるように

class BooksManage extends Component { 
    componentWillMount() { 
    const { dispatch, fetchManagePage } = this.props 
    dispatch(fetchManagePage()) 
    } 
    render() { 
    const sections = this.props.books.map((section, index) => { 
     return (
     <div className='row' key={index}> 
      <BookSectionContainer index={index} /> 
     </div> 
    ) 
    }) 
    return (
     <div className='row'> 
     <div className='col-md-8'> 
      {sections} 
      <BookPaginationContainer paginationClass='books' /> 
     </div> 
     <div className='col-md-3'> 
      <div style={{position: 'fixed', width: 'inherit'}}> 
      <EmployeesListContainer /> 
      </div> 
     </div> 
     </div>) 
    } 
} 

が、それはBookPaginationContainerを使用して、期待するいくつかの状態パラメータ：

Warning: Failed prop type: The prop `currentPage` is marked as required in `Paginate`, but its value is `undefined`. 

等

問題：BookPaginationContainerがBooksManageの子であるため、componentWillMount()で達成しようとしているのは、アクションをディスパッチすると必要な状態パラメータがフェッチされるということです。実際に何が起こる

：

action REQUEST_MANAGE_PAGE @ 18:41:49.770 
Warning: Failed prop type: The prop `currentPage` is marked as required in `Paginate`, but its value is `undefined`. 
action RECEIVE_MANAGE_PAGE @ 19:01:40.327 

をすべてのページの後には正しくレンダリングさが、私はこれをどのように良いですと心配です。

Answer 1

データが必要なコンポーネントを、そのデータを持つまでレンダリングしないでください。

render() { 
    ... 
    if(!this.props.requireData) { 
    return <div>Loading</div>; 
    } 
    return (
    <div className='row'> 
    ...