Реакция - ComponentDidMount не получает значение из состояния Redux

Question

Я корректно обновляю состояние Redux. Вот что такое состояние Redux updateNeeded (в данном случае это правда).

Я записываю в консоль значение this.props.mandatory_fields.updateNeeded, но я всегда задаю исходное состояние. Он не обновляется из Redux State. Ниже приведен код, где я делаю вызов API.

class CompleteProfile extends Component {
  state = {
    completeProfile: false,
  }

  componentDidMount = () => {
    let { dispatch, session } = this.props
    dispatch(getMandatoryFields(session.username))
    console.log(
      'this.props.mandatory_fields.updateNeeded -- ' +
        this.props.mandatory_fields.updateNeeded
    )
    if (this.props.mandatory_fields.updateNeeded !== false) {
      this.setState({
        completeProfile: this.props.mandatory_fields.updateNeeded,
      })
    }
  }
...
...
....
const mapStateToProps = state => ({
  mandatory_fields: state.User.mandatory_fields,
  session: state.User.session,
})

export default connect(mapStateToProps)(CompleteProfile)

Результат журнала консоли

this.props.mandatory_fields.updateNeeded -- false

Это должно быть true, как показано на изображении состояния Redux выше. Что мне не хватает?

Answer 1

С помощью решения @ Max весь ваш новый код должен выглядеть следующим образом:

componentDidUpdate(prevProps) {
  let { dispatch, session } = this.props
  dispatch(getMandatoryFields(session.username))
  console.log(
    'this.props.mandatory_fields.updateNeeded -- ' +
      this.props.mandatory_fields.updateNeeded
  );
  if (!prevProps.mandatory_fields.updateNeeded && this.props.mandatory_fields.updateNeeded) {
    this.setState({
      completeProfile: this.props.mandatory_fields.updateNeeded,
    })
  }
}

Answer 2

Вы должны проверить this.props.mandatory_fields.updateNeeded в componentDidUpdate крючке. После изменения состояния Redux Компонент будет обновлен. Таким образом, вы должны проверить props в componentDidUpdate вместо сразу после вызова диспетчеризации. Вы можете увидеть мой код:

componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(
        'this.props.mandatory_fields.updateNeeded -- ' +
        this.props.mandatory_fields.updateNeeded
    )
}

Ваш код станет:

class CompleteProfile extends Component {
  state = {
    completeProfile: false,
  }

  componentDidMount(){
    let { dispatch, session } = this.props
    dispatch(getMandatoryFields(session.username))
  }

  componentDidUpdate() {
    console.log(
      'this.props.mandatory_fields.updateNeeded -- ' +
        this.props.mandatory_fields.updateNeeded
    )
    if (this.props.mandatory_fields.updateNeeded !== false) {
      this.setState({
        completeProfile: this.props.mandatory_fields.updateNeeded,
      })
    }
  }
...
...
....
const mapStateToProps = state => ({
  mandatory_fields: state.User.mandatory_fields,
  session: state.User.session,
})

export default connect(mapStateToProps)(CompleteProfile)