React Redux not updating component on URL change

Question

My ImageGallery component is not updating itself when my URL changes.

For example, when I click an item it routes me from '/movies/12345' to '/movies/9999', but the component itself is not updating to show the images associated with '/movies/9999'. Instead it shows the images associated with '/movies/12345'.

Parent Component:

class Parent extends Component { 
  componentDidMount() {
    this.props.fetchImages(this.props.match.params.id);
  }

 render(){
   ..
     <ImageGallery />
   ..
  }
}

export default connect(mapStateToProps, { fetchImages })(Parent);

ImageGallery Component:

class ImageGallery extends Component {
    render(){
      return this.props.images.map(img => {
           <img src={img.image_path}
      })
}
}

And then I tried wrapping my connect function with withRouter and used componentWillReceiveProps. But this doesn't work it complains

Cannot read property id of Undefined

class Parent extends Component { 
  componentDidMount() {
    this.props.fetchImages(this.props.match.params.id);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.match.params.id !== this.props.match.params.id) {
      this.props.fetchImages(nextProps.params.id);
    }
  }

 render(){
   ..
     <ImageGallery />
   ..
  }
}

export default withRouter(
  connect(mapStateToProps, { fetchImages })(Parent)
);

App.js

  <div>
    <NavBar />
    <Router history={history}>
      <Route exact path='/' component={Landing} />
      <Route exact path='/movies/:id' component={Parent} />
    </Router>
  </div>

How do I get the ImageGallery to display the correct images? Thanks.

UVM · Accepted Answer · 2019-12-05 04:58:14Z

1

Please add render to Route

When you change /movies/12345 to /movies/9999 component will not render so for that we are adding key to component

App.js

<div>
  <NavBar />
  <Router history={history}>
    <Route exact path='/' component={Landing} />
    <Route
      exact
      path='/movies/:id'
      render={({ match }) => <Parent key={match.params.id || ''} />} // Add render 
    />
  </Router>
</div>

edited Dec 5, 2019 at 4:58

UVM

9,9347 gold badges44 silver badges66 bronze badges

answered Dec 4, 2019 at 6:56

Jay

3,1392 gold badges16 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

j_nguyen Over a year ago

For more info on this solution: medium.com/@migcoder/…

Noman Hassan · Accepted Answer · 2019-12-04 06:53:26Z

0

Check if the store updates when you fetch new images in componentWillReceiveProps. Otherwise it seems fine. There might be something wrong with the reducer.

answered Dec 4, 2019 at 6:53

Noman Hassan

3911 silver badge10 bronze badges

Collectives™ on Stack Overflow

React Redux not updating component on URL change

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related