this.props.function nameは定義されていません

Question

私はreduxアプリケーションを作成することに取り組んでいますが、自分のコンポーネントの1つに作成したメソッドを作成しましたが、そのメソッドにアクセスしていますが、コンソールにアクセスすると、 this.props.selectBookは関数ではありません。私は何が起こっているのか、それができるのか分かりません。

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

class BookList extends React.Component { 
    renderList() { 
     return this.props.books.map((book) => { 
      return (
      <li onClick={() => this.props.selectBook(book)} key={book.title} 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 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({selectBook: selectBook}, dispatch); 
} 

export default connect(mapStateToProps, mapDispatchToProps)(BookList); 

〜アクションクリエータ

あなたのコードの問題は、あなたの actions/indexファイル内に、あなたはこの構文でselectBookをインポートする必要があり、あなたのコンポーネントを意味するデフォルトのキーワードでselectBookを輸出していることである

export default function selectBook (book) { 
    return { 
     type: 'BOOK_SELECTED', 
     payload: book 
    } 
} 

Answer 1

import selectBook from '../actions/index';

今のところ、この構文でセレクトブックをインポートしました

import {selectBook} from '../actions/index';

したがって、selectBookは未定義です。

あなたのファイルで、この構文を使用する場合は、通常、この

export function selectBook (book) { 
    return { 
     type: 'BOOK_SELECTED', 
     payload: book 
    } 
} 

ようselectBookをエクスポートする必要があります