this.props.function name not defined

Question

嘿所有我正在創建一個redux應用程序，但是在我的一個組件中創建一個我創建的方法，它訪問它的actioncreator方法，但是當訪問它時，控制檯說它是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); 

〜行動的創建者

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

Answer 1

與您的代碼的問題是，你actions/index文件中導出selectBook用，這意味着在你的組件，你必須通過這個語法來導入selectBook默認關鍵字

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

現在您已經用此語法導入了selectBook

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

因此，selectBook是未定義的。

如果你想在文件中使用這個語法必須導出selectBook通常這樣

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