关于空支柱的警告：为什么会发生？

我有分量，这需要渲染之前获取服务器数据：关于空支柱的警告：为什么会发生？

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

所有页面后呈现正确，但我关心的是如何好这一点。

来源

2017-06-19 Joe Half Face

“Paginate”组件在哪里。 –

在获得该数据之前，不要呈现需要数据的组件。

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

来源

2017-06-19 16:08:34

我明白了，但我想我需要一些额外的回调来改变实际元素的“加载”吗？ –

你没有包括你的组件从何处/如何获取数据，所以很难说。 React组件在获得新状态或道具时会自动重新渲染。因此，如果您的抓取调度将所需数据拖入状态或道具中，它将自动使用正确的元素重新渲染。 –

当我使用'connect'时，它工作正常 –

关于空支柱的警告：为什么会发生？

回答

相关问题