未捕获的类型错误：无法使用react-bootstrap轮播读取未定义的属性

Question

我正在用react-redux实现一个react-bootrap轮播，我在标题中得到了错误。

我正在使用受控转盘，当转盘自动更改幻灯片时会出现错误消息。

当用户点击prev时。 下一个按钮并手动更改它们似乎都没问题。

如果我添加持久性作为道具或类似的道具或选项，我不明白吗？

这是我的代码：

容器：

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

编辑：这是相关的react-bootstrap轮播代码（抛出错误的地方）

  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

我分析了react-bootstrap Carousel.js代码，我怀疑它是react-bootstrap库本身的问题。

这条线在Carousel.js代码中触发了更改 ：

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

this.next方法需要类型的参数SynteticEvent ，但没有从传递setTimeout呼叫。 这样可以解释您的错误信息： ...persist of undefined...

这个问题可能已经隐藏了很长时间， 但是在这个提交中暴露出来 ，其中事件参数实际上是由Carousel.ja代码本身使用的。

所以我建议创建react-bootstrap Github问题，同时降级到不包含提到的提交的版本。

Answer 2

这是项目的github页面中的问题链接。 似乎有一个修复即将到来：

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