redux-form initialValuesが機能しない

Question

私はredux-formに問題があります。私は、標準のCRUDアプリケーションで更新/編集ページを作成しています。フォームを取得して初期値を取得できないようです。私reduxFormの設定で：「真enableReinitialize」

import React, { Component } from 'react'; 
import { Field, reduxForm } from 'redux-form'; 
import { Link, withRouter } from 'react-router-dom'; 
import { connect } from 'react-redux'; 
import { updateArtwork, fetchPiece } from '../actions'; 

class UpdateArtwork extends Component { 
    componentDidMount() { 
    const { id } = this.props.match.params; 

    this.props.fetchPiece(id); 
    } 

    renderField(field) { 
    return (
     <div className="input-field"> 
     <input 
      placeholder={field.label} 
      type="text" 
      {...field.input} 
     /> 
     </div> 
    ); 
    } 

    onSubmit(values) { 
    const { updateArtwork, history } = this.props; 
    const { id } = this.props.match.params; 

    updateArtwork(id, values, history); 
    } 

    render() { 
    const { handleSubmit, piece } = this.props; 

    return (
     <div className="card-panel"> 
     <h4>Edit this piece.</h4> 
     <form onSubmit={handleSubmit(this.onSubmit.bind(this))}> 
      <Field 
      label="Artwork URL" 
      name="image" 
      component={this.renderField} 
      /> 
      <Field 
      label="Artist" 
      name="artist" 
      component={this.renderField} 
      /> 
      <Field 
      label="Class" 
      name="teacher" 
      component={this.renderField} 
      /> 
      <Field 
      label="Grade" 
      name="level" 
      component={this.renderField} 
      /> 
      <Field 
      label="Description" 
      name="description" 
      component={this.renderField} 
      /> 
      <button 
      type="submit" 
      className="waves-light waves-effect btn" 
      > 
      Submit 
      </button> 
      <Link 
      to={`/artwork/show/${piece._id}`} 
      style={{ margin: '0 5px' }} 
      className="waves-light waves-effect btn" 
      > 
      Cancel 
      </Link> 
     </form> 
     </div> 
    ); 
    } 
} 

const mapStateToProps = ({ artwork }, ownProps) => { 
    return { 
    piece: artwork[ownProps.match.params._id], 
    initialValues: artwork[ownProps.match.params._id] 
    }; 
}; 

export default reduxForm({ 
    form: 'UpdateArtworkForm', 
    enableReinitialize: true 
})(
    connect(mapStateToProps, { updateArtwork, fetchPiece })(withRouter(UpdateArtwork)) 
); 

私はinitialValues含めた私のオンライン検索で見つけた最も一般的な問題は、私のmapStateToProps機能とを含むので支える：ここに私のコードです。私はこれらの両方をして、私はまだ取得していません。

このコンポーネントの他のすべてが機能します。ピースは更新された入力にあるもので正しく更新され、私のfetchPiece（）アクションは、ショーページと全く同じ方法でピースを適切にフェッチします。すべての正しい情報は、[ネットワーク]タブのオブジェクトに収められています。私はちょうどフォームにロードするように見えることはできません。

私はここで何が欠けていますか？

編集：アートワークは[ownProps.match.params._id以下を返す：

{_id: "5a15ecb8d6cfbe0c4e68b3be", artist: "Ceanne", teacher: "Royals", level: "14", description: "Derek and Ceanne at the Royals game.", …} 
artist: "Ceanne" 
comments: (3) [{…}, {…}, {…}] 
created: "2017-11-22T21:31:36.849Z" 
description: "Derek and Ceanne at the Royals game." 
image: "https://res.cloudinary.com/drkgrntt/image/upload/v1511386296/raixtyabfjrosvnnfavs.jpg" 
level: "14" 
teacher: "Royals" 
__v: 8 
_id: "5a15ecb8d6cfbe0c4e68b3be" 
__proto__: Object 

Answer 1

Iはhere上述の方法からわかる差がreduxForm HOCがにコンポーネントを接続した後にラップされています還元店。一方、この例では、その逆です。輸出のための下記のコードに従うことができますか？

UpdateArtworkForm = reduxForm({ 
    form: 'UpdateArtworkForm', 
    enableReinitialize: true 
})(UpdateArtwork) 

export default connect(
    ({ artwork }, ownProps) => { 
    return { 
     piece: artwork[ownProps.match.params._id], 
     initialValues: artwork[ownProps.match.params._id] 
    }; 
    }, 
    { updateArtwork, fetchPiece } 
)(withRouter(UpdateArtworkForm)) 

私は示唆している他のアプローチは、UpdateArtworkFormがレンダリングされた親コンポーネントで、店舗でconnectにしようとしている、redux-form

からinitialValuesは、あなたが持って言うように小道具を取得し、それを渡しますコンポーネントCreateあなたがUpdateArtworkFormレンダリングされている場合、それは

class Create extends React.Component { 
    render() { 
    return <UpdateArtworkForm initialValues={artwork[ownProps.match.params._id]} 
    } 
}