キャッチされていないタイプのエラー：リアクションブートストラップカルーセルで未定義のプロパティを読み取ることができません

Question

react-bootsrapカルーセルをreact-reduxで実装していますが、タイトルにエラーが表示されます。

私は制御カルーセルを使用しています。カルーセルがスライドを自動的に変更するとエラーメッセージが表示されます。

ユーザがprevをクリックすると、次のボタンとそれを手動で変更してもOKです。

私は小道具や同様の小道具やオプションとして存続し続けなければならないのですか？

ここに私のコードです：

コンテナ：

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) 

、ここでは、関連するビットがコンポーネントである：

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

編集： ここでは、関連する反応、ブートストラップカルーセルコードがあります（エラーがスローされる場所）

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

プロジェクトのgithubページの問題のリンクは次のとおりです。来る修正がありますようだ：

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

Answer 2

私はreact-bootstrapのCarousel.jsコードを分析し、私はそれがreact-bootstrap、ライブラリ自体に問題があると思います。

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

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

this.next方法は、タイプSynteticEventのパラメータを期待していますが、どれもsetTimeout呼び出しから渡されません。それはあなたのエラーメッセージexlpains：...persist of undefined...。

イベントのパラメータが実際にCarousel.jaコード自体によって使用されている問題は、おそらく長い間隠されていた可能性があります。but was exposed with this commit

私はreact-bootstrap Githubの問題を作成し、その間は前述のコミットを含まないバージョンにダウングレードすることをお勧めします。