Как в реакте подождать пока компонент получит props от родителя?

Question

[Hahahahh]

В родительском компоненте делается get запрос к серверу и он получает данные, затем эти данные данные передаются в дочерний компонент. Так вот как сделать так, чтобы рендер не наступал пока компонент не получит props? Просто есть необходимость на основе полученных props изменить состояние в компоненте.

import React from 'react'
import { connect } from 'react-redux'
import { playGrid,pauseGrid, addTrack, removeTrack } from '../actions/Pauseplay.js'
import api from '../api/api.js'

class MusicGrid extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      flags: [],
      loading: true
    }
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.props.data !== prevProps.data) {
      let temp = []
      for (let i = 0; i <= (this.props.data.length - 1); i++) {
        temp.push(false)
      }
      this.setState({flags: temp})
      this.setState({loading: false})
    }
  }

  addSong = (artist, song, i) => {
    this.state.flags[i] = true
    this.setState({flags: this.state.flags})
    api.music.save(artist, song)
    this.props.addTrack(i)
}
  removeSong = (artist, song, i) => {
    this.state.flags[i] = false
    this.setState({flags: this.state.flags})
    api.music.remove(artist, song)
    this.props.removeTrack(i)
  }

  render() {
    if (this.state.loading) {
      return null
    }
    else {
      return (<div className="content_wrapper">
      <div className="content">
      {this.props.data.map((el, i) => (
        <div className="musicblock" key = {i} >
                <div className="player" index = {i}>
                  <div className="img_block">
                  {!(this.props.flags[i] == false) ? (<i className = "fa fa-plus" onClick = {() => this.addSong(el.artist, el.song, i)} aria-hidden = "true"></i>)
                  : (<i className = "fa fa-check" onClick = {() => this.removeSong(el.artist, el.song, i * 1500)} aria-hidden="true"></i>)}
                  {!this.props.status ? (<i className = "fa fa-play fa-3x" onClick = {() => this.props.playGrid(el.artist, el.song)} aria-hidden = "true"></i>)
                  : (<i className = "fa fa-pause fa-3x" onClick = {this.props.pauseGrid} aria-hidden = "true"></i>)}
                  </div>
                </div>
                <div className="title_name"><p>{el.artist} - {el.song}</p></div>
              </div>
      ))}
          </div>
        </div>) }
    }
}

function mapStateToProps(state) {
  return {
    status: state.music.isPlaying
  }
}

export default connect(mapStateToProps, { playGrid, pauseGrid, addTrack, removeTrack })(MusicGrid)

Comments

[Ислам Киясов]

render() {
   if(this.props.data.length === 0) return false;
   ...
}

[Сергей]

Можете хранить необходимые данные в локальном `state` компонента и обновлять их при `componentWillReceiveProps ()`. И когда придут новые `props`, изменится локальный `state`, тогда компонент перерендерится.
Поправьте, если не прав.

[Hahahahh]

Ислам Киясов, Все равно, появляется ошибка, потому что он не успевает изменить состояние массива flags, а на основе этого массива объекты и рендерятся у меня

[Hahahahh]

Сергей, (this.props.flags[i] == false). Вот именно по этой причине мне нужно заполнить state flags конкретно до рендера, иначе ошибка

[Сергей]

Hahahahh, проверяйте не на false, а на undefined, т.е. !this.props.flags (flags есть, можно что-то делать, иначе - другое действие).
Потому что проверка на false выдаст ошибку, если this.props.flags еще нет. Но я не уверен в том, что когда приходят props, то компонент ререндерится. Потому предложил способ выше.

[Hahahahh]

Сергей, А в каком жизненном цикле компонента тогда делать такую вот манипуляцию?

let temp = []
      for (let i = 0; i <= (this.props.data.length - 1); i++) {
        temp.push(false)
      }
      this.setState({flags: temp})

Чтобы сразу при получении props от родительского компонента вызывалось

[Сергей]

Hahahahh,

componentWillReceiveProps (nextProps) {
  let temp = []
  for (let i = 0; i <= (nextProps.data.length - 1); i++) {
    temp.push(false)
  }
  this.setState({ flags: temp })
}

nextProps - те props, которые обновились

[Hahahahh]

Сергей, все равно та же ошибка, хотя как он проходит условие в рендере непонятно.

[Сергей]

Hahahahh, Киньте ссылку на код в JsFiddle

[Hahahahh]

Сергей, https://jsfiddle.net/8997tnga/

[Сергей]

Hahahahh,
В этом участке кода надо обращаться к обновленным props, если они придут:

{!(this.state.flags[i] == false) ? (<i className = "fa fa-plus" onClick = {() => this.addSong(el.artist, el.song, i)} aria-hidden = "true"></i>)
                  : (<i className = "fa fa-check" onClick = {() => this.removeSong(el.artist, el.song, i * 1500)} aria-hidden="true"></i>)}

[Hahahahh]

Сергей, все заработало, была вместо this.state.flags случайно прописал this.props.flags..., спасибо что помогали)

Answer 1

[Иван Герасимов]

Можно higher-order component использовать (плюс recompose для красивого объединения `connect` с другими HOC):

/**
 * Target component
 */
…
export default withLoader('data')(MusicGrid);

/**
 * @desc "withLoader" HOC
 */
const withLoader = targetProp => WrappedComponent => props => (
  props[targetProp]
    ? <WrappedComponent {...props} />
    : <Loader /> // or null
);

Answer 2

[Петр Мухуров]

componentWillReceiveProps(nextProps)