React Router + Redux Form + Edit/New Component == Fail

Question

データベース内の既存のアイテムを作成または編集できるReactコンポーネントを作成しようとしています。 1つのことを除いてすべてうまくいっています：editルート（異なる動作の同じコンポーネント）からnewルートを呼び出すと、Reactは以前のフォームの状態を保持し、空のデータを持つ新しいフォームを見ることができません。それは私がnewルートをどこか別の場所から呼び出すときにのみ機能します。

可能なルート：

• /bastions/new - データなし

• /bastions/:idとコンポーネントを描画する - 既存のデータ

を持つコンポーネントが誰かのために身近な問題ですレンダリング？

（最も関連性の個展に出せるとの）物事をきれいにするだけでいくつかのコード：事前に

感謝。

class BastionForm extends Component { 

    componentWillMount() {  
     if(this.props.bastion.number) {  
      this.props.fetchBastion(this.props.params.number); 
     } 
    } 

    renderField({ input, label, type, meta: { touched, error, warning } }) { 
     return (
      <FormGroup controlId={label} {...validation}> 
       <ControlLabel>{label}</ControlLabel> 
       <FormControl {...input} placeholder={label} type={type} /> 
       <FormControl.Feedback /> 
      </FormGroup> 
     ); 
    } 

    render() { 
     const { handleSubmit, pristine, reset, submitting } = this.props; 

     return (
      <form onSubmit={handleSubmit(this.onSubmit.bind(this)) }> 
       <h3>Create a new Bastion</h3> 

       <Field name="sample" type="text" component={this.renderField} /> 

       <ButtonToolbar> 
        <Button bsStyle="primary" disabled={submitting}>Submit</Button> 
       </ButtonToolbar> 
      </form> 
     ); 
    } 
} 

BastionForm = reduxForm({ 
    form: 'BastionForm', 
    enableReinitialize: true 
})(BastionForm); 

BastionForm = connect(
    state => ({ 
     initialValues: state.bastions.bastion 
    }), { fetchBastion } 
)(BastionForm); 

export default BastionForm; 

Answer 1

componentWillMountは、マウントが行われる前に一度だけ呼び出されます。 /bastions/newと/bastions/:idは実際に同じルートを参照しているので、/bastions/:idから/bastions/newにパスが変更されたときにBastionFormはマウント解除されません。したがって、存在するデータを表示するか、データなしで表示するかを、BastionForm（アクションのディスパッチ）の状態を変更することによって決定することができます。次に、小道具の変更をcomponentWillReceivePropsで処理します。