Как динамически задать дефолтное состояние компоненту в ReactJS?

Question

[Игорь Нистаков]

Хочу выполнить проверку перед тем как задать initial state компоненту, как можно это сделать?

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter : 0,
      step : 0,
      listeningInFavorite : true 
  }

Спасибо!

Comments

[Ninja Mate]

А что проверяете?

[Игорь Нистаков]

Ninja Mate: listeningIsFavorite true или false. Приходит массив, и нужно через цикл прогнать его, вычислив есть ли совпадения, если есть то задать true если нет false

Answer 1

[Ninja Mate]

используйте

componentWillMount(){
if(this.props.listeningIsFavorite===true)
...
}else

я так понимаю что вы что то из другого элемента передаете как props

Comments

[Игорь Нистаков]

componentWillMount() выполняется перед рендером компонента? Вот это мне и нужно. Чтобы перед рендером вызвать некий метод, выполнить проверку и изменить состояние компонента в зависимости от результатов этой проверки

[Ninja Mate]

Игорь Нистаков: да перед рендером. https://facebook.github.io/react/docs/react-compon...

[MorozoW]

Также используйте метод shouldComponentUpdate() https://facebook.github.io/react/docs/react-compon... для проверка того, необходимо ли делать ререндеринг компонента либо нет.

Answer 2

[Игорь Нистаков]

componentWillMount() {
    if(Meteor.user()) { //если пользователь авторизован
      var userFavoriteList = Meteor.user().profile.favoritesList; //получаем список избранного пользователя
      var currentListeningId = this.props.listeningId; //текущее объявление

      for(let i; i < userFavoriteList.length; i++) { 
        //Если id текущего объявления совпали с id из избранного
        if(userFavoriteList._id === currentListeningId) { 
          //Меняем на правду
          this.setState({
            listeningInFavorite : true
          });
          console.log('Объявление найдено')
        } else { //Если нет то меняем на ложь
          this.setState({
            listeningInFavorite : false
          });
          console.log('Объявление не найдено в списке избранного')
        }
      }
    }
  }