mapDispatchToProps不起作用。道具空

我收到此錯誤：this.props.postBooks不是一個函數。mapDispatchToProps不起作用。道具空

我有一個行動 - postBooks - 我試圖通過道具派遣。

這裏是我的組件：

"use strict" 

import React from 'react' 
import {Well,Panel,FormControl,FormGroup,ControlLabel,Button} from 'react-bootstrap' 
import {connect} from 'react-redux' 
import {bindActionCreators} from 'redux' 
import {postBooks} from '../../actions/booksActions' 
import {findDOMNode} from 'react-dom' 

export class BooksForm extends React.Component{ 

    handleSubmit(){ 
     const book = [{ 
      title: findDOMNode(this.refs.title).value, 
      description: findDOMNode(this.refs.description).value, 
      price: findDOMNode(this.refs.price).value 
     }] 
     this.props.postBooks(book) 
    } 
    render(){ 

     return(
      <Well> 
       <Panel> 
        <FormGroup controlId='title'> 
         <ControlLabel> Title </ControlLabel> 
         <FormControl  
          type='text' 
          placeholder='Enter Title' 
          ref='title' /> 
        </FormGroup> 

        <FormGroup controlId='description'> 
         <ControlLabel> Enter Description </ControlLabel> 
         <FormControl  
          type='text' 
          placeholder='Enter Description' 
          ref='description' /> 
        </FormGroup> 

        <FormGroup controlId='price'> 
         <ControlLabel> Enter Price </ControlLabel> 
         <FormControl  
          type='text' 
          placeholder='Enter Price' 
          ref='price' /> 
        </FormGroup> 
        <Button 
        onClick={this.handleSubmit.bind(this)} 
        bsStyle='primary'> Enter New Book </Button> 

       </Panel> 
      </Well> 
      ) 
    } 

} 

function mapDispatchToProps(dispatch){ 
    return bindActionCreators({postBooks},dispatch) 
} 
export default connect(null,mapDispatchToProps)(BooksForm);

看來，調度沒有被映射到的道具，因爲在控制檯登錄道具如預期，道具都是空的。任何幫助讚賞。在此先感謝

編輯：新增操作

"use strict" 
// POST A BOOK 
export function postBooks(book){ 
    return { 
     type:"POST_BOOK", 
     payload: book 
    } 
} 
// DELETE A BOOK 
export function deleteBooks(id){ 
    return { 
     type:"DELETE_BOOK", 
     payload: id 
    } 
} 
//UPDATE BOOK 
export function updateBooks(book){ 
    return { 
     type:"UPDATE_BOOK", 
     payload: book 
    } 
} 

//Retrieve all books as if using API 

export function getBooks(){ 
    return{ 
     type:'GET_BOOKS' 
    } 
}

來源

2017-07-01 bbmhmmad

我們可以看到'mapDispatchToProps'代碼嗎？ – Li357

如果我理解正確，mapDispatchToProps函數位於組件代碼的底部。 – bbmhmmad

請導入了Redux店後再試。讓我知道，如果這工作或不，並且也不建議使用refs。 https://facebook.github.io/react/docs/refs-and-the-dom.html

來源

2017-07-02 01:15:45 Phanindra

它沒有工作... – bbmhmmad

在bindActionCreators中的postBooks周圍花括號。動作創建者應該是一個功能，你給它一個對象。我想這就是問題所在。讓我知道。 – Phanindra

我不這麼認爲。通過使用object，因此我讓bindActionCreators知道該組件中的postBooks prop應該派發我從bookActions模塊導入的postBooks操作。我之前使用過這種格式，沒有任何問題。 – bbmhmmad

想通了。

所以，我在下面導出組件，並導出默認值。

注意到webpack提供了一個錯誤'導入和導出可能只出現在頂層'。提前取消最高出口，現在按預期工作。

來源

2017-07-02 11:12:28 bbmhmmad

我很高興它現在對你有用，但我不認爲這實際上是你的問題。 'export class BooksForm ...'和'export default connect'之間的區別是使用'。/ BooksForm'中的import {BooksForm}導入另一個文件，另一個是從'.BooksForm'導入BooksForm。 '（注意括號）。您出口的方式很好，而且通常是爲了測試而完成的。 webpack錯誤[更可能與您的babel配置中的錯誤有關]（https://stackoverflow.com/questions/37902849/import-and-export-may-only-appear-at-the-top-level）。 –

我也同樣從Class行中刪除了我的導出，並重建了我的項目，反應爲native。現在工作。唐卡。 – Hesam

mapDispatchToProps不起作用。道具空

回答

相關問題