CODEWITHSUNDEEP
reactjsreact-redux
JayaniH
JayaniH

Reputation: 363

React Redux | setState using mapStateToProps

I want to set the local state of a component using props obtained from mapStateToProps. When I use this.setState in ComponentWillMount() method or ComponentDidMount() method, it is undefined.

componentWillMount() {
    this.props.fetchBooks(this.props.id);
    this.setState({
      books:this.props.books
    })
  }

const mapStateToProps = (state, ownProps) => {
  let id = ownProps.match.params.book_id;
  return {
    id: id,
    books: state.library.books,
  };
};

The 'books' data is retrieved using the fetchBooks() function obtained by mapDispatchToProps. How can I set the sate using the props obtained from mapStateToProps?

Upvotes: 0

Views: 963

Answers (3)

Pierre V.
Pierre V.

Reputation: 1625

The problem might be that this.props.fetchBooks is an asynchronous operation. In that case, this.setState is called before the operation is completed, hence the undefined value.

But why do you want to store the books in the local state? Why don't you use directly the books prop instead?

Using derived state is usually unnecessary, and might be a bad idea (see this blog post from the official React website for an in-depth explanation).

If you really need to store the books in the local state, you could:

Upvotes: 1

Thomas Aumaitre
Thomas Aumaitre

Reputation: 807

You better use straight inside your render() {} this.props.assignedSupervisors instead of putting it in a class state.

Otherwise use 

componentDidUpdate(prevProps, prevState) {
 if (this.props.assignedSupervisors && this.props.assignedSupervisors !== prevProps.assignedSupervisors) {
  this.setState({
     supervisors:this.props.assignedSupervisors
  })
 }
}

Upvotes: 0

Brian Thompson
Brian Thompson

Reputation: 14355

Your componentWillMount lifecycle method will only fire once, so using it to call the function that fetches the data and also use the data will most likely not work. You should use componentWillReceiveProps instead.

constructor(props) {
    props.fetchBooks(props.id);
}

componentWillReceiveProps(nextProps) {
    if (nextProps.books != this.props.books) {
        this.setState({books: nextProps.books});
    }
}

Upvotes: 0

Related Questions