Geek Answers Handbook

Uncaught type error: unable to save property of undefined property with reactive loading carousel

I implement a reaction-bootsrap carousel with a reduct reduction, and I get an error in the name.

I am using a controlled carousel and an error message appears when the carousel automatically changes the slide.

When the user clicks the prev button. The following buttons and manual changes all look fine.

I do not understand, should I add perseverance as a props or options for props or the like?

Here is my code:

Container:

import React, { Component } from 'react' import { connect } from 'react-redux' import { Link } from 'react-router' import store from 'store/configureStore' import Slides from 'components/SlideShow' import { getInitalSlides, handleSelect } from 'actions/SlidesActions' class Home extends Component { constructor(props) { super(props) this.state = { index: null, direction: null } this.handleSelect = this.handleSelect.bind(this) static fetchData({ store }) { return store.dispatch(getInitalSlides()) } componentDidMount() { this.props.getInitalSlides() } handleSelect(selectedIndex, e) { //alert(e) this.props.handleSelect(selectedIndex, e) } render() { return ( <div className="Home"> <h1>Home Page</h1> <Slides slides={this.props.slides} getInitialState={this.state.index} getInitialStateD={this.state.direction} slidesControl={this.handleSelect} /> <div><Link to="/question">to question</Link></div> <div><Link to="/posts">to posts</Link></div> </div> ) } } function mapStateToProps (state) { const { slides, handleSelect } = state return { slides: state.slides, onSelect: state.handleSelect } } export { Home } export default connect(mapStateToProps { getInitalSlides, handleSelect})(Home)

and here is the corresponding bit in the component:

  render() { return ( <Carousel activeIndex={this.props.getInitialState} direction={this.props.getInitialStateD} onSelect={(selectedIndex,e)=>this.props.slidesControl(selectedIndex,e)} > { this.props.slides.map((s)=>{ let id = s.get('id') let title = s.get('title') let image = s.get('image') let alt = s.get('alt') let caption = s.get('caption') return( <Carousel.Item key={id} > <img width={900} height={500} alt={s.get('alt')} src={image} alt={alt}/> <Carousel.Caption> <h3>{title}</h3> <p>{caption}</p> </Carousel.Caption> </Carousel.Item> ) }) } </Carousel>) } }

Edit: Here is the appropriate bootstrap reaction carousel code (where the error is thrown)

  var onSelect = this.props.onSelect; if (onSelect) { if (onSelect.length > 1) { // React SyntheticEvents are pooled, so we need to remove this event // from the pool to add a custom property. To avoid unnecessarily // removing objects from the pool, only do this when the listener // actually wants the event. e.persist(); e.direction = direction; onSelect(index, e); } else { onSelect(index); } }
+5
source share
2 answers

I analyzed Carousel.js react-bootstrap code, and I suspect that this is a problem in the react-bootstrap library react-bootstrap .

This line causes a change in Carousel.js code :

 this.timeout = setTimeout(this.next, this.props.interval);

this.next method expects a parameter of type SynteticEvent , but none of them are passed from the setTimeout call. This expresses your error message: ...persist of undefined...

The problem was probably hidden for a long time, but was exposed with this latch , where the event parameter is actually used by the Carousel.ja code on its own.

Therefore, I recommend creating a problem with the bootstrap-Github reaction-and in the meantime switch to a version that does not contain the commit.

+1
source

Here is the link to the github project page. There seems to be a fix there:

https://github.com/react-bootstrap/react-bootstrap/issues/2029

0
source

More articles:


All Articles