因此,用户单击按钮编辑将打开模式。他在那里可以更改信息,然后保存。之后,他被重定向到仍然有旧信息的主页
所以我尝试使用push方法重定向,然后重新加载页面,但数据仍未更新
EditConsigne类扩展了组件{
handleSubmit = (e) => {
e.preventDefault()
this.props.editConsigne(this.state)
this.props.history.push('/consigne')
window.location.reload();
}
render () {
const { auth } = this.props
if (auth.logIn === false) {
return <Redirect to='/connexion'/>
}
return(
<Modal
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
show={this.props.show}
onHide={this.props.onHide}
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
{this.props.consigne.name}
</Modal.Title>
</Modal.Header>
<Modal.Body>
<h6> Modification </h6>
<Form style={{marginTop: 0}} onSubmit={this.handleSubmit}>
<Form.Group as={Row} controlId="name">
<Form.Label column sm={2}>Nom </Form.Label>
<Col sm={10}>
<Form.Control
type="name"
placeholder={this.props.consigne.name}
value={this.state.name}
onChange={this.handleChange}
/>
</Col>
</Form.Group>
<Form.Group as={Row} controlId="description">
<Form.Label column sm={2}>Description</Form.Label>
<Col sm={10}>
<Form.Control
as="textarea"
type="description"
placeholder={this.props.consigne.description}
value={this.state.description}
onChange={this.handleChange}
/>
</Col>
</Form.Group>
<Form.Group as={Row} controlId="operation">
<Form.Label column sm={2}>Types d'opération</Form.Label>
<Col sm={10}>
<Form.Control
type="description"
placeholder={this.props.consigne.operation}
value={this.state.operation}
onChange={this.handleChange}
/>
</Col>
</Form.Group>
<Form.Group as={Row} controlId="command">
<Form.Label column sm={2}>Commandes</Form.Label>
<Col sm={10}>
<Form.Control
type="text"
placeholder={this.props.consigne.command}
value={this.state.command}
onChange={this.handleChange}
/>
</Col>
</Form.Group>
<Form.Group as={Row} controlId="result">
<Form.Label column sm={2}>Résultat</Form.Label>
<Col sm={10}>
<Form.Control
type="text"
placeholder={this.props.consigne.result}
value={this.state.result}
onChange={this.handleChange}
/>
</Col>
</Form.Group>
<Form.Group as={Row} controlId="link">
<Form.Label column sm={2}>Lien</Form.Label>
<Col sm={10}>
<Form.Control
type="text"
placeholder={this.props.consigne.link}
value={this.state.link}
onChange={this.handleChange}
/>
</Col>
</Form.Group>
<Form.Group as={Row} id="formGridCheckbox">
<Form.Label column sm={2}> Temporaire</Form.Label>
<Col sm={10}>
<Form.Check
label="Souhaitez-vous rendre cette consigne temporaire ?"
type="checkbox"
checked={this.state.status}
onChange={this.handleChecked}
/>
</Col>
</Form.Group>
</Form>
</Modal.Body>
<Modal.Footer>
<Button variant="success" onClick={this.handleSubmit}>Enregistrer</Button>
<Button variant="secondary" onClick={this.props.onHide}>Close</Button>
</Modal.Footer>
</Modal>
)
}
}
const mapDispatchToProps = (dispatch) => {
return {
editConsigne: (consigne) => dispatch(editConsigne(consigne))
}
}
const mapStateToprops = (state) => {
return {
auth: state.auth,
}
}
export default withRouter((connect(mapStateToprops, mapDispatchToProps)(EditConsigne)))