如何在獲取數據之前停止組件渲染？

Question

目前在反應中，我必須在 componentDidMount 生命周期方法中調用操作創建者來獲取數據。 然而，該組件使用數據，這取決於響應的速度確定數據是否存在。 我怎樣才能使組件在數據在其中之前不呈現？

componentDidMount() {
    this.props.getTotalHours()
    this.props.getTrained()
  }

渲染功能：

render() {
    let hours = parseInt(_.map(this.props.hours, 'hours'));
    let trained = _.map(this.props.trained, 'trained');
    return (
      <div className="o-layout--center u-margin-top-large">
          <div className="o-layout__item u-width-1/2@medium u-width-1/4@large">
            <div style={{width: '80%', margin: '0 auto'}}>
              <PieChart data={hours} goal={100} label=' Training Hours Completed'/>
            </div>
          </div>

Action Creator 將請求的返回值存儲在應用程序狀態中：

 export function getTotalHours() {
   const url = `${ROOT_URL}dashboard/hours`
   const request = axios.get(url)
   return {
     type: FETCH_HOURS,
     payload: request
   }
 }

Answer 1

使用then或await控制您的異步操作，並使用this.state控制您的內容是否被加載。 僅在this.state.loaded === true之后呈現您的內容

constructor(props) {
  super(props)
  this.state = {
    loaded: false
  }
}

async componentDidMount() {
    await this.props.getTotalHours()
    await this.props.getTrained()
    this.setState({loaded: true})
  }

content() {
  let hours = parseInt(_.map(this.props.hours, 'hours'));
  let trained = _.map(this.props.trained, 'trained');
  return (
    <div className="o-layout--center u-margin-top-large">
    <div className="o-layout__item u-width-1/2@medium u-width-1/4@large">
      <div style={{width: '80%', margin: '0 auto'}}>
        <PieChart data={hours} goal={100} label=' Training Hours Completed'/>
      </div>
    </div>
  )
}

render() {
  return (
  <div>
    {this.state.loaded ? this.content() : null}
  </div>
  )
}

編輯：如果您關心 API 調用的性能，您可以與Promise.all並行運行它們。

async componentDidMount() {
   const hours = this.props.getTotalHours()
   const trained = this.props.getTrained()
   await Promise.all([hours, trained])
   this.setState({loaded: true})
 }

Answer 2

在您的構造函數中，聲明一個狀態變量來跟蹤數據是否已加載。 例如：

constructor (props) {
  super(props)
  this.state = {
    dataLoaded: false
  }
}

然后在您的render方法中，如果this.state.dataLoaded為 false，則返回 null：

render () {
  const { dataLoaded } = this.state
  return (
    <div>
      {
        dataLoaded &&
        <YourComponent />
      }
    </div>
  )
}

在用於獲取數據的方法中，確保在獲取數據時調用this.setState({ dataLoaded: true })

Answer 3

您無法停止渲染，但可以為渲染內容提供條件。

示例

render() {
    if(this.props.hours. length <= 0 || this.props.trained.length <= 0 ) {
      return (<div><span>Loading...</span></div>);
    } else {
      let hours = parseInt(_.map(this.props.hours, 'hours'));
      let trained = _.map(this.props.trained, 'trained');
      return (
        <div className="o-layout--center u-margin-top-large">
            <div className="o-layout__item u-width-1/2@medium u-width-1/4@large">
              <div style={{width: '80%', margin: '0 auto'}}>
                <PieChart data={hours} goal={100} label=' Training Hours Completed'/>
              </div>
            </div>
      )
    }