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

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

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

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

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

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

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

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

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

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

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

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

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

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

Почему не работает audio.pause() у класса Audio?

0xD34F, все, допилил, спасибо большое)

Почему не работает audio.pause() у класса Audio?

0xD34F, flag просто отвечает за то, какую иконку показывать(паузы или проигрывания), а status это состоянии из стора. Для того чтобы audio сделать частью state, нужно сделать примерно что-то такое?

constructor(props){
    super(props);
    this.state = {
      flag: true,
      audio: ''
    }
  }

  componentDidMount() {
    this.setState({audio: document.getElementById('audio-player')})
  }

Почему не работает audio.pause() у класса Audio?

Для полноты картины.

import React from 'react'
import { connect } from 'react-redux'
import { play, pause } from '../actions/Pauseplay.js'

class Player extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      flag: true
    }
  }

  handleClick = () => {
    this.setState({flag: !this.state.flag})
  }

  render() {
    let audio = new Audio('data/CrooksUK-AFewPeacefulDays.mp3')
    if (this.props.status) {
      audio.play()
    }
    if (this.props.status == false) {
      audio.pause()
    }
    return (<div className = "player_icons">
            <i className = "fa fa-step-backward fa-2x" aria-hidden = "true"></i>
            <div onClick = {this.handleClick}>
            {this.state.flag ? (<i className = "fa fa-play fa-2x" onClick = {this.props.play} aria-hidden = "true"></i>)
            :(<i className = "fa fa-pause fa-2x" onClick = {this.props.pause} aria-hidden = "true"></i>)}
            </div>
            <i className = "fa fa-step-forward fa-2x" aria-hidden = "true"></i>
            </div>
    )
  }
}

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

export default connect(mapStateToProps, { play, pause })(Player)

Как можно воспроизводить и останавливать аудио в React без использования ref при отключенных контроллерах?

Александр Таратин , Благодарю.

Почему не изменяется state приложения?

Mikhail Osher, Все, проблема решилась, в редьюсере неправильно импортировал тип, а точнее забыл поставить фигурные скобки...
Спасибо большое за то что помогали, Михаил)

Почему не изменяется state приложения?

Mikhail Osher, я вставлял console.log в этот action и все отображалось корректно.
Ну и вот собственно я пытался получить этот state.

function mapStateToProps(state){
  return {
    user: state.user
  }
}

export default connect(mapStateToProps)(Musicform)

Но ведь даже без mapstatetoprops В devtools Должно отображаться изменение состояния приложения.
Со скринами думаю будет чуть понятнее. То есть экшн с объектом внутри отображается, а стэйт не меняется вообще

Почему не изменяется state приложения?

Mikhail Osher, И еще, если в я user reducer вставляю initial state, то это состояние показывается нормально, но потом опять же, экшн состояние не меняет, так и остается висеть состояние из Initialstate

Почему не изменяется state приложения?

Mikhail Osher, Так, вот я подключаю rootReducer в store

import rootReducer from './rootReducer'

const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)))

class App extends React.Component {
    render() {
        return  <div>
                  <Menu />
                  <Main />
                </div>
    }
}

render(
  <Provider store = {store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  window.document.getElementById('root'));

Сам rootReducer

import { combineReducers } from 'redux'

import user from './reducers/user.js'

export default combineReducers({
  user
});

ну и user reducer

import USER_LOGGED_IN from '../types/types.js'

export default function user(state = {}, action = {}) {
  switch (action.type) {
    case USER_LOGGED_IN:
      return action.user;
    default:
      return state;
  }
}

И да, единственное место где используется userLoggedIn action прикреплено в посте, больше нигде в приложении его нет.

Почему не изменяется state приложения?

Mikhail Osher, У меня же после того как данные попали в редьюсер должен измениться state, а в redux devtools срабатывает только action и показываются данные которые в нем висят. Просто я пытаюсь в дальнейшим в некоторых компонентах взять state из стора, но возвращает он пустой объект

Почему не изменяется state приложения?

какого именно?

Почему не срабатывает функция в Redux?

davidnum95, в общем все заработало после того как убрал фигурные скобки из импорта. Огромное спасибо)

Почему не срабатывает функция в Redux?

davidnum95, Так, но запрос то теперь проходит, он хоть и фэйлится, но в нем теперь видно вводимые данные

Почему не срабатывает функция в Redux?

davidnum95, Так, попробовал подключить LoginPage без обертки, предыдущая ошибка пропала, теперь Cannot read property 'then' of undefined

Почему не срабатывает функция в Redux?

все компоненты экспортирую через export class, импортирую через import { Component } from '...',
компонент LoginPage импортирую только в меню, компонент рендерится и значит с этим все вроде нормально