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

import { URLSearchParams } from '@angular/http'; const params = new URLSearchParams(); params.set('userName', userName); params.set('password', password); this.http.post(url, params)仅在安装发生前调用一次。由于componentWillMount和/bastions/new实际上是指相同的路线，因此当您的路径从/bastions/:id更改为BastionForm时，系统不会卸载/bastions/:id。因此，您可以通过更改/bastions/new的状态（发送操作）来决定是显示现有数据还是显示无数据。然后在BastionForm中处理道具更改。

反应路由器+ Redux表单+编辑/新组件==失败

1 个答案: