2017-07-16 104 views
0

即时通讯的新手,并且正在关注udemy的一个反应基础课程。 我的控制台日志中出现以下错误。有人可以帮我吗?Uncaught TypeError:_this2.props.selectBook不是一个函数

bundle.js:21818 Uncaught TypeError: _this2.props.selectBook is not a function 

任何帮助,将不胜感激。谢谢。

容器/书list.js

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { selectBook } from '../actions/index'; 
import { bindActionCreators } from 'redux'; 

class BookList extends Component { 
    renderList() { 
     return this.props.books.map((book) => { 
      return (
       <li 
        key={book.title} 
        onClick={() => this.props.selectBook(book)} 
        className="list-group-item"> 
        {book.title} 
       </li> 
      ); 
     }); 
    } 

    render() { 
     return (
      <ul className="list-group col-sm-4"> 
       {this.renderList()} 
      </ul> 
     ) 
    } 
} 


function mapStateToProps(state) { 
    return { 
     books: state.books 
    }; 
} 

//Anythin returned from this function will end up as props 
// on the BookList container 
function mapDispatchToProps(dispatch) { 
    // whenever selectBook is called, the result should be passed 
    // to all of our reducers 
    return bindActionCreators({ selectBook: selectBook }, dispatch); 
} 

// Promote BookList from a component to a container - it needs to know 
// about this new dispatch method, selectBook. Make it available 
// as a prop. 
export default connect(mapStateToProps)(BookList); 

动作/ index.js

export function selectBook(book) { 
    console.log('A book has been selected:', book.title); 
} 

组件/ app.js

import React, { Component } from 'react'; 

import BookList from '../containers/book-list'; 

export default class App extends Component { 
    render() { 
    return (
     <div> 
     <BookList /> 
     </div> 
    ); 
    } 
} 
+0

提供完整的代码内。 –

+0

我如何显示多个文件? @kinduser – Cody

+1

发布你正在使用'selectBook'变量的文件。在问题描述中增加了 –

回答

2

自己找到了答案。

// didnt have included the mapDispatchToProps function call in below lines. 
export default connect(mapStateToProps, mapDispatchToProps)(BookList); 
+0

这个文件是什么对我来说,我跟随斯蒂芬格里德的udemy当然 –

3

使用import selectBook from '../actions/index'而不是import { selectBook } from '../actions/index';

0

确保出口selectBook行动,以便它的可用应用程序

export function selectBook() {...} 
+0

似乎已经是这样 –

相关问题