reactjs - 未捕获的 TypeError : _this2. props.selectBook 不是函数

标签 reactjs react-redux

我是 ReactJS 的新手,正在学习 udemy 上的 React 基础类(class)。 我的控制台日志上出现以下错误。有人可以帮助我吗?

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

如有任何帮助,我们将不胜感激。谢谢。

containers/book-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);

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

最佳答案

我自己找到了答案。

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

关于reactjs - 未捕获的 TypeError : _this2. props.selectBook 不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45133591/

相关文章:

javascript - 为什么会产生auth.js :65 Uncaught (in promise) TypeError: Cannot read property 'data' of undefined?

reactjs - 错误 : Objects are not valid as a React child (found: object with keys {}). 如果您打算呈现子集合,请改用数组

reactjs - 出现错误无法读取未定义的属性 'setState'

javascript - ReactJS 改变状态对象内的对象属性

reactjs - React Native - 退出应用程序时调用方法

javascript - 为什么在禁用为真时不 react 禁用 onClick 处理程序?

javascript - JS : GET request with added "data" parameter like cURL -d '{key: value, key2: value}'

javascript - 如何有条件地启用 onClick

javascript - 使用 react webpack 文件加载器提供静态 pdf

javascript - 在 React 中使用 PropTypes 将字符串值作为对象传递给 Redux 组件