未捕获的类型错误:_this2.props.selectBook 不是函数 [英] Uncaught TypeError: _this2.props.selectBook is not a function

问题描述

我是 reactjs 的新手，正在学习关于 udemy 的 react 基础课程.我在控制台日志中收到以下错误.有人可以帮我吗?.

bundle.js:21818 Uncaught TypeError: _this2.props.selectBook 不是函数

任何帮助将不胜感激.谢谢.

containers/book-list.js

import React, { Component } from 'react';从'react-redux'导入{连接}；import { selectBook } from '../actions/index';从redux"导入 { bindActionCreators };类 BookList 扩展组件 {渲染列表(){返回 this.props.books.map((book) => {返回 (this.props.selectBook(book)}className="list-group-item">{书名});});}使成为() {返回 (<ul className="list-group col-sm-4">{this.renderList()})}}函数 mapStateToProps(state) {返回 {书籍:state.books};}//从这个函数返回的任何东西都将作为道具结束//在 BookList 容器上函数 mapDispatchToProps(dispatch) {//无论何时调用 selectBook，都应该传递结果//到我们所有的减速器return bindActionCreators({ selectBook: selectBook }, dispatch);}//将 BookList 从组件提升到容器 - 它需要知道//关于这个新的调度方法，selectBook.使其可用//作为道具.导出默认连接(mapStateToProps)(BookList)；

actions/index.js

导出函数 selectBook(book) {console.log('已选择一本书:', book.title);}

components/app.js

import React, { Component } from 'react';从 '../containers/book-list' 导入 BookList；导出默认类 App 扩展组件 {使成为() {返回 (<div><书单/>

);}}

解决方案

自己找到了答案.

//下面几行没有包含 mapDispatchToProps 函数调用.导出默认连接(mapStateToProps，mapDispatchToProps)(BookList)；

im a newbie for reactjs and was following a react basic course on udemy. I get the following error on my console log. Can anybody assist with me?.

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

Any help would be appreciated. Thanks.

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

components/app.js

import React, { Component } from 'react';

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

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

解决方案

Found the answer myself.

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

这篇关于未捕获的类型错误:_this2.props.selectBook 不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！