2017-03-23 23 views
0

私の小道具は子コンポーネントに渡されません。私は送信ボタンを押すと、私は次のエラーを取得する小道具は子コンポーネントに渡されません - redux-form/react

... 

export class NewProject extends React.PureComponent { 

    constructor(props) { 
    super(props); 
    this.saveProject = this.saveProject.bind(this); 
    } 

    saveProject = (values) => { 
    console.log(values); 
    } 

    render() { 
    return (
     <div> 
     <div style={{fontSize: 14}} className="container"> 
      <NewProjectForm 
      onSubmit={this.saveProject} 
      /> 
     </div> 
     </div> 
    ); 
    } 
} 
... 

と子コンポーネントのNewProjectForm

... 
const NewProjectForm = (props) => { 
    const { 
    handleSubmit, 
    pristine, 
    reset, 
    submitting, 
    locale 
    } = props; 

    console.log(props); 

    return (
     <form onSubmit={handleSubmit}> 
      <RaisedButton labelColor='#ffffff' type="submit" backgroundColor='#86BFC4' label="Save" /> 
     </form> 
    </Form> 
) 
} 

export default reduxForm({ 
    form: 'newProjectForm' 
})(NewProjectForm); 

Uncaught Error: You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop 
    at checkSubmit (eval at ./node_modules/redux-form/lib/reduxForm.js (http://localhost:3000/main.js:5694:1), <anonymous>:133:11) 
    at Form.submit (eval at ./node_modules/redux-form/lib/reduxForm.js (http://localhost:3000/main.js:5694:1), <anonymous>:540:74) 
    at Object.ReactErrorUtils.invokeGuardedCallback (webpack:///./~/react-dom/lib/ReactErrorUtils.js?:70:16) 

エラーが発生した私は、次の親コンポーネントのNewProjectを持っています小道具が渡されていないので、なぜそれが - 私は何が欠けているのですか?ここで

enter image description here

答えて

0

あなたが小道具でのonSubmit送信しhandleSubmitを使用しようと...にconsole.logの出力である

const { 
    handleSubmit, // change to onSubmit 
    pristine, 
    reset, 
    submitting, 
    locale 
    } = props; 
0

その名の不一致の問題:

<NewProjectForm 
    onSubmit={this.saveProject} 
/> 

onSubmitとして渡しています。 D handleSubmitとしてそれを使用して:

const { 
    handleSubmit, // change this to onSubmit 
    pristine, 
    reset, 
    submitting, 
    locale 
    } = props; 
+0

私たちも同じコメントを書いた) – Andrew

+0

@Andrew笑素敵な、同じソリューション:) –

+0

を理想的に、あなたはSOのカルマポイントを分割する必要があります。 :-) –

関連する問題