CODEWITHSUNDEEP
reactjsredux
Giedrius
Giedrius

Reputation: 613

React-redux mapStateToProps not received in the componentDidMount

So I've rewrote my code a bit to use state instead of modifying props since it is not what I should do. The problem that occurred now is that when componentDidMount runs props are still not fetched from the backend, therefore the if statements in the function are always false. 

componentDidMount() {
    this.props.getTypes('sport');
    this.props.getSchema();
    this.props.getDomainForm();

    if(Object.keys(this.props.schema).length) {
        this.setState({schema: this.props.schema})
    }
    if(Object.keys(this.props.formData).length) {
        this.setState({form: this.props.formData})
    }
}

const mapStateToProps = (state) => {
    return {
        schema: state.admin.settings.Domains.schema.data || {},
        formData: state.admin.settings.Domains.domain.data || {},
        types: state.admin.settings.Domains.types.data || {},
    }
};

I've stepped trough the code and it seems like componentDidMount runs only once. Since componentWillRecieveProps is deprecated I am unsure what to do to fix this, and I hope you guys can help me with this one.

PS. there is no problems with fetch actions and reducers works perfectly I haven't changed anything there and redux debugger is displaying the results correctly.

Upvotes: 0

Views: 1530

Answers (3)

touttino
touttino

Reputation: 1

Using componentDidUpdate along with componentDidMount is more suitable for this situation. componentDidMount will set the state for initial render and componentDidUpdate will set state for future renders. Don't forget to test the prevProps parameter of the componentDidUpdate method with current props to check if the data has changed or not. Read the documentation here

Upvotes: -1

Taras Polovyi
Taras Polovyi

Reputation: 438

As a replacement of componentWillReceiveProps there was introduced static getDerivedStateFromProps(props, state) method, it's called each time component receives new props, so it might be helpful for you. Here's the docs.

Upvotes: 2

amdev
amdev

Reputation: 7442

i think the problem is your fetch is async and it takes little bit time to accomplish the task, and before the fetch is been finished , your component mounts on the DOM.

as you noted you can see the data is been received via redux debugger and you have no problem with it , so i'm guessing that you passed the initial state as empty object or array to your state. so then your component receives data through props and you are not updating the state to reRender the component , what you need to do is just use componentWillReceiveProps to update the state whenever the new data is been received by just checking if current props is not equal to previous props , some code like this :

componentWillReceiveProps = (nextProps) => {
    if(this.props.yourPropsFromRedux != nextProps.yourPropsFromRedux ) {
      this.setState({ yourState: nextProps.yourPropsFromRedux })
    }
  }

Upvotes: 4

Related Questions