2016-05-30 39 views
2

私はreact reduxで簡単なブログを作っています。パッケージとしてredux形式を使用しています 投稿、取得、削除などのイベントを作成しましたが、編集で値とタイトルを取得できないため編集できませんでした。私はそれは私が、私はこの問題を解決するにはどうすればよいComponentWillMountReactでReact/Reduxフォームで投稿値を取得する方法

this.props.edit.titleを書くとき、未定義のプロパティ「タイトル」を読み込めませんにエラーを得ている、それはcomponentwillMountに初期化して解決しようとしたが、編集フォームで値を取得する方法

import React, { Component, PropTypes } from 'react'; 
import * as actions from '../../actions/index'; 
import { connect } from 'react-redux'; 
import {reduxForm} from 'redux-form'; 
import {initialize} from 'redux-form'; 

class EditPost extends Component { 
    componentWillMount(){ 
    this.props.dispatch(initialize('edit', { title: this.props.edit.title }, ['title', 'body'])); 

    this.props.EditPost(this.props.params.id); 
    } 

handleFormSubmit(formProps){ 
this.props.addPost(formProps); 
this.context.router.push('/posts'); 
} 
    render(){ 
     const {handleSubmit,fields:{title,body}} = this.props; 
     if(!this.props.edit){ 
      return <div>Loading...</div>; 
     } 
     return (
      <div> 
      <div className="row"> 
      <div className="col-md-12"> 
       <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}> 
       <fieldset className="form-group"> 
        <label>Title:</label> 
        <input {...title} className="form-control" /> 
        {title.touched && title.error && <div className="text-danger">{title.error}</div>} 
        </fieldset> 
       <fieldset className="form-group"> 
        <label>Body:</label> 
        <textarea {...body} className="form-control" ></textarea> 
        {body.touched && body.error && <div className="text-danger">{body.error}</div>} 
       </fieldset> 
       <button className="btn btn-success">Add</button> 
       </form> 
      </div> 
      </div> 
      </div> 
       ); 
    } 

    } 

function mapStateToProps(state) { 
    return { 
     edit:state.posts.edit 
    } 
} 
export default reduxForm({ 
form:'edit', 
fields:['title','body'],},mapStateToProps,actions)(EditPost); 
+0

'this.props.edit'はおそらく定義されていません。これらの小道具はどうやって渡しますか?あなたのレデューサーは見えますか?もう少しコードを投稿できますか? – glcheetham

+0

また、ES6クラス構文を使用する場合は、あなたの返信に 'componentWillMount'の代わりにコンストラクタを使用する必要があります。 – glcheetham

+0

こんにちは、@glcheetham、次のように問題を解決しました。 – onerciller

答えて

2

私は次のように問題を解決しました。私はinitialValuesとポストの値を取得することができます。state.posts.edit

function mapStateToProps(state) { 
    return { 
     edit:state.posts.edit, 
     initialValues: state.posts.edit 
    } 
} 
+0

http://stackoverflow.com/questions/43146388/editable-form-reactjs – Piyush

関連する問題