Uncaught type error: Kann die Eigenschaft nicht lesen von undefined mit react-bootstrap karussell

Question

Ich implementiere ein react-bootsrap Karussell mit react-redux und ich bekomme den Fehler im Titel.

Ich verwende ein gesteuertes Karussell und die Fehlermeldung wird angezeigt, wenn das Karussell eine Folie automatisch ändert.

Wenn der Benutzer prev klickt. nächsten Tasten und ändert es manuell alles scheint in Ordnung zu sein.

Ich bekomme es nicht, sollte ich hinzufügen als Requisiten oder Optionen zu Requisiten oder ähnliches beibehalten?

Hier ist mein Code:

Behälter:

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) 

und hier ist das entsprechende Bit in der Komponente:

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: Hier ist der relevante reagieren-Bootstrap-Karussell Code (wo der Fehler ausgelöst wird)

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); 
    } 
    } 

Answer 1

Hier ist der Problem Link in der Github-Seite des Projekts. Es scheint, gibt es einen Fix up kommen:

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

Answer 2

Ich analysierte Carousel.js Code von react-bootstrap und ich vermute, dass es Sache selbst in react-bootstrap Bibliothek ist.

There is this line triggering change in Carousel.js code:

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

this.next Methode erwartet Parameter vom Typ SynteticEvent, aber keiner von setTimeout Aufruf übergeben. Das zeigt Ihre Fehlermeldung an: ...persist of undefined....

Das Problem wurde wahrscheinlich für eine lange Zeit versteckt, but was exposed with this commit, wo Ereignisparameter tatsächlich von Carousel.ja Code selbst verwendet wird.

Also ich empfehle, react-bootstrap Github Problem zu erstellen und in der Zwischenzeit auf Version herunterstufen, die erwähnte commit nicht enthält.