Question

我有组件，需要在渲染之前获取服务器数据：

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'>
    ...

警告空道具：为什么会发生？

1 个答案: