CODEWITHSUNDEEP
reactjs
ashwintastic
ashwintastic

Reputation: 2312

componentWillReceiveProps() is not executing in child component?

Hi I have two react component parent and child both of them are connected to the redux store to same object and the object get data from server asynchronously

Problem: on receiving new props parent's componentWillReceiveProps get executed but child's componentWillReceiveProps is not executing any idea??

child component

import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';


class Child extends Component{

  constructor(props) {
    super(props);
    this.handleUserClick = this.handleUserClick.bind(this)

  }

  handleUserClick(event){
    event.preventDefault();
    let userInfo = {
      email: '[email protected]',
      password: 'password',
    };
    this.props.someAction(userInfo); // changes the store but on store change componentWillReceiveProps not executing
  }

  componentWillReceiveProps(nextProps){
    console.log(nextProps)
  }


 render(){
    return (
       <div><form onSubmit={this.handleUserClick}></form></div>
  )
  }
}

function matchDispatchToProps(dispatch) {
  return bindActionCreators(
    {  someAction: someAction}, dispatch)
}

function mapStateToProps (state){
  return {
    dummyState: state.dummyState
  };
}

export default connect(mapStateToProps, matchDispatchToProps)(Child);

when i'm clicking handleUserClick is get executed but on receiving data from server child componentWillReceiveProps is not executing but parent componentWillReceiveProps is executing

my parent component

import React from 'react';
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux';

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {parentState: 0}
  }


  componentDidMount() {
    this.props.someAction(); // same action called in child component
  }

 componentWillReceiveProps(nextProps){
   // it gets executed and call child render function
    if(nextProps.something === true){
       this.setState({parentState: 1 })
  }
    if(nextProps.something === false){
      this.setState({parentState: -1})
    }

  }


  render() {

    if(this.state.parentState == -1){
      return(
      <Child/>
       )
    }
    else{
      return(null)
    }
  }
}



function matchDispatchToProps(dispatch) {
  return bindActionCreators(
    {  someAction: someAction}, dispatch)  //same action in child component called
}



function mapStateToProps (state){
  return {
    dummyState: state.dummyState  // //same state in child component called
  };
}

export default connect(mapStateToProps, matchDispatchToProps)(Parent);

Upvotes: 1

Views: 962

Answers (2)

Austin Poole
Austin Poole

Reputation: 785

It could be a couple of reasons

  1. Your reducer is not updating and the state is the remains same.
  2. Your reducer is updating the state but its the exact same values thus the component parent component and child component is not being re-rendered.
  3. If you are not passing changed props into the child component and you are relying redux to render then it could be you misnamed the name of the state attribute that is updating.

If you provided more src code such as your action creator, reducer, and a little bit more source it'll be easier to debug.

Upvotes: 0

Christopher Chiche
Christopher Chiche

Reputation: 15335

If it is the first time that the child is rendered (you set renderChild to true) then componentWillReceiveProps is not called (this is for updates). You should look into componentWillMount instead.

If you se the renderChild state to true when it was already true, nothing will happen.

Upvotes: 3

Related Questions