React Router + Redux Form + Edit/New 组件 == 失败

Question

我正在尝试创建一个能够在我的数据库中创建或编辑现有项目的 React 组件。一切正常，除了一件事：当我从 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(dispatch an action)的状态来决定是显示已有数据还是显示无数据。然后处理 componentWillReceiveProps.

中的道具变化

React Router + Redux Form + Edit/New 组件 == 失败

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

reactjs

react-router

redux-form