React - ComponentDidMount 没有从 Redux 状态中获取价值 [英] React - ComponentDidMount not getting value from Redux state

问题描述

我正在正确更新 Redux 状态.这是 updateNeeded 的 Redux 状态(在本例中为 true).

I am getting the Redux state updated correctly. Here is what the Redux state of updateNeeded is (In this case it is true).

我正在控制台记录值 this.props.mandatory_fields.updateNeeded 但它始终是我设置的初始状态.它没有从 Redux State 更新.下面是我进行 api 调用的代码.

I am console logging the value this.props.mandatory_fields.updateNeeded but it is always the initial state that I set. It is not getting updated from the Redux State. Below is the code where I make the api call.

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 状态图所示.我错过了什么?

It should be true as shown in the Redux state image above. What am I missing ?

推荐答案

您必须在 componentDidUpdate 钩子中检查 this.props.mandatory_fields.updateNeeded.更改 Redux 状态后，组件将更新.因此，您必须在 componentDidUpdate 中检查 props 而不是在调用 dispatch 后立即检查.你可以看到我的代码:

You must check this.props.mandatory_fields.updateNeeded in componentDidUpdate hook. After you change Redux state, the Component will be updated. So you must check props in componentDidUpdate instead of right after you call dispatch. You can see my code:

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)

这篇关于React - ComponentDidMount 没有从 Redux 状态中获取价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！