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

Question

Я пытаюсь создать компонент React, способный создавать или редактировать существующий элемент в моей базе данных. Все работает нормально, кроме одного: когда я вызываю маршрут new с маршрута edit (тот же компонент с другим поведением), 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 на самом деле ссылаются на тот же маршрут, BastionForm не будет размонтирован, если ваш путь изменится с /bastions/:id на /bastions/new. Таким образом, вы можете решить, показывать ли существующие данные или показывать без данных, изменив состояние BastionForm (отправьте действие). Затем отрегулируйте реквизит в componentWillReceiveProps.