Estoy usando un componente conectado redux en reaccionar. Simplemente tengo problemas para representar un botón después de llamar al controlador handleSubmit onClick. Solo aparece después de actualizar la página, lo que puede indicar un problema asíncrono. Entonces, en este componente, tengo una propiedad de estado redux llamada estado y la he asignado a los accesorios de mi estado local. Escuché que cuando el estado o los accesorios cambian, es cuando el componente se vuelve a renderizar. Entonces, lo que pensé hacer es en mi método de representación, si this.state.showButton es verdadero, entonces este botón se mostraría. Sin embargo no lo hace. También registré en la consola this.state.showButton y de hecho es cierto.

Pero el botón no está allí. Hice lo siguiente:

 class VerificationForm extends React.Component { constructor(props) { super(props); this.state = { formError: false, showModal: false, showButton: false }; } handleSubmit = (e) => { e.preventDefault(); this.setState({ formError: showFormError }); verifyLevelOne() .then((data) => { const { status } = this.props; const verified = status === 'VERIFIED'; this.setState({ showButton: verified }, () => { actions.showSubmissionNotification(data); }); console.log('Hereeeeee', this.state.showButton); }); } render() { const { classes, actions, status } = this.props; const { formError, showModal } = this.state; return ( <div> <form onSubmit={this.handleSubmit} autoComplete="off"> <Grid className={classes.container} container direction="column" alignItems="center" xs={12}> <Grid container direction="column" xs={11}> <span style={{ display: 'flex', justifyContent: 'space-around' }}> <Button fullWidth onClick={this.handleSubmit} type="submit" variant="contained" color="primary">Submit Information</Button> { this.state.showButton && <Button onClick={this.handleShowModal} variant="contained" color="primary">Proceed</Button> } </span> </Grid> </Grid> </form> </div> ); } } function mapStateToProps(state) { return { status: state.global.verification.status, }; } function mapDispatchToProps(dispatch) { return { actions: { ...bindActionCreators({ showNotification, showSubmissionNotification, }, dispatch) } }; } const base = withRouter((withStyles(styles)(VerificationForm))); export default connect(mapStateToProps, mapDispatchToProps)(base);