2017-04-17 45 views
0

我收到在控制檯下面的錯誤,當我嘗試導航到一個登入形式:終極版形式 - 未捕獲的錯誤:`mapDispatchToProps`

Uncaught Error: `mapDispatchToProps` must return an object. Instead received function() { 
       return computedActions; 
      }. 
    at Object.invariant [as default] (bundle.js:21392) 
    at computeDispatchProps (bundle.js:19996) 
    at new Connect (bundle.js:20049) 
    at ReactCompositeComponentWrapper.mountComponent (bundle.js:7346) 
    at ReactCompositeComponentWrapper.wrapper [as mountComponent] (bundle.js:1536) 
    at Object.mountComponent (bundle.js:5728) 
    at ReactCompositeComponentWrapper.mountComponent (bundle.js:7423) 
    at ReactCompositeComponentWrapper.wrapper [as mountComponent] (bundle.js:1536) 
    at Object.mountComponent (bundle.js:5728) 
    at ReactDOMComponent.mountChildren (bundle.js:14298) 

這裏是有問題的文件(signin.js) :

import React, {Component} from 'react'; 
import {reduxForm} from 'redux-form'; 

class Signin extends Component { 
    handleFormSubmit({email, password}) { 
     console.log(email, password); 
    } 

    render() { 

     const {handleSubmit, fields: {email, password}} = this.props; 

     return (
      <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}> 
       <fieldset className="form-group"> 
        <label>Email:</label> 
        <input {...email} className="form-control"/> 
       </fieldset> 
       <fieldset className="form-group"> 
        <label>Password:</label> 
        <input {...password} className="form-control"/> 
       </fieldset> 
       <button action="submit" className="btn btn-primary">Sign in</button> 
      </form> 
     ) 
    } 
} 

export default reduxForm({ 
    form: 'signin', 
    fields: ['email', 'password'] 
})(Signin); 

視圖「signin.js」工作正常,直到我在代碼中添加了redux-form。下面是我使用的反應,終極版,終極版形式的版本:

"react": "^0.14.3", 
"react-dom": "^0.14.3", 
"react-redux": "4.0.0", 
"react-router": "^2.0.1", 
"redux": "^3.0.4", 
"redux-form": "^6.6.3" 

回答

1

終極版型V6不支持config屬性fields,這在以前的版本中得到了支持。 要創建一個字段,您應該使用組件Field, FieldArray or Fields

看看文檔,http://redux-form.com/6.6.3/docs/api/

1

我覺得有一個問題在這裏

<form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}> 

您提供的是功能作爲參數傳遞給handleSubmit這inturn retuns一個價值onSubmit

試試這個

class Signin extends Component { 

    render() { 

     const {handleSubmit, fields: {email, password}} = this.props; 

     return (
      <form onSubmit={handleSubmit}> 
       <fieldset className="form-group"> 
        <label>Email:</label> 
        <input {...email} className="form-control"/> 
       </fieldset> 
       <fieldset className="form-group"> 
        <label>Password:</label> 
        <input {...password} className="form-control"/> 
       </fieldset> 
       <button action="submit" className="btn btn-primary">Sign in</button> 
      </form> 
     ) 
    } 
} 

而在爲父級OU將有handleSubmit功能類似

handleSubmit = ({email, password}) => { 
    console.log(email, password); //Do what you want with values here 
}