React Router + Redux Form + Bearbeiten/Neue Komponente == Fehler

Question

Ich versuche, eine React-Komponente zu erstellen, die in der Lage ist, ein vorhandenes Element in meiner Datenbank zu erstellen oder zu bearbeiten. Alles funktioniert gut, bis auf eine Sache: Wenn ich eine Route new von der Route edit (die gleiche Komponente mit unterschiedlichem Verhalten) aufrufen, behält React einfach den vorherigen Formularzustand und ich kann kein neues Formular mit leeren Daten sehen. Es funktioniert nur, wenn ich die new Route von woanders aus anrufe.

Mögliche Routen:

• /bastions/new - Renders die Komponente ohne Daten

• /bastions/:id - Renders die Komponente mit einem vorhandenen Daten

für jemanden Ist das Problem bekannt?

Nur einige Code, um die Dinge Reiniger (mit den wichtigsten peaces):

Vielen Dank im Voraus.

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 wird nur einmal vor der Montage aufgerufen. Da /bastions/new und /bastions/:id sich eigentlich auf dieselbe Route beziehen, wird BastionForm nicht ausgehängt, wenn sich Ihr Pfad von /bastions/:id zu /bastions/new ändert. Sie können also entscheiden, ob Sie eine existierende Daten anzeigen oder keine Daten anzeigen möchten, indem Sie den Status BastionForm ändern (eine Aktion versenden). Dann ändern Sie die Requisiten in componentWillReceiveProps.