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

Я пытаюсь создать компонент 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;

person Felipe Pantoja    schedule 30.10.2016    source источник


Ответы (1)


componentWillMount вызывается только один раз перед монтированием. Поскольку /bastions/new и /bastions/:id на самом деле относятся к одному и тому же маршруту, BastionForm не будет размонтирован, когда ваш путь изменится с /bastions/:id на /bastions/new. Таким образом, вы можете решить, показывать ли существующие данные или показывать без данных, изменив состояние BastionForm (отправить действие). Затем обработайте изменение реквизита в componentWillReceiveProps.

person Jason Xu    schedule 31.10.2016
comment
Спасибо за поддержку и извините за задержку с ответом. Ты прав! componentWillReceiveProps решил проблему. Но мне интересно кое-что о том, что вы сказали, что и /bastions/:id, и /bastions/new относятся к одному и тому же маршруту, и я думаю, это потому, что первый имеет параметр URL (id) и может быть заменен на любая строка (например, новая в данном случае), и поэтому BastionForm не будет размонтирован. Но даже полностью изменить маршруты не получилось. Это поведение как-то связано с избыточностью и состоянием рассинхронизации реактивного маршрутизатора? - person Felipe Pantoja; 11.11.2016
comment
Если два маршрута ссылаются на один и тот же компонент (например, BastionForm), он все равно не будет воссоздавать компонент, даже если два маршрута совершенно разные. Кроме того, если ответ правильный, пожалуйста, отметьте его принятым, чтобы сделать его очевидным для других парней, столкнувшихся с тем же вопросом. - person Jason Xu; 11.11.2016
comment
Хорошо, теперь я понял. Спасибо за ответ! - person Felipe Pantoja; 11.11.2016