时间戳

首页 > 解决方案 > 调用 setState 时，React-Redux 连接的组件无法更新视图/触发重新渲染

javascript - 调用 setState 时，React-Redux 连接的组件无法更新视图/触发重新渲染

问题描述

我在反应中使用了一个 redux 连接的组件。只是在调用 handleSubmit onClick 处理程序后呈现按钮时遇到问题。它仅在我刷新页面后出现，这可能表明存在异步问题。所以在这个组件中，我有一个名为 status 的 redux 状态属性，并将它映射到我本地状态的 props。我听说当状态或道具发生变化时，就是组件重新渲染的时候。所以我想做的是在我的渲染方法中，如果 this.state.showButton 为真，那么这个按钮就会显示。然而它没有。我还控制台记录了 this.state.showButton ，这确实是真的。

在此处输入图像描述

但是按钮不存在。我做了以下事情：

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);

标签： javascriptasynchronousreduxreact-reduxcallback

解决方案

setState 是异步执行的，所以如果你console.log只是在 setstate 之后它不会给你正确的值

我建议console.log在您使用状态进行调试时返回渲染。参考以下：

<span style={{ display: 'flex', justifyContent: 'space-around' }}>
            <Button fullWidth onClick={this.handleSubmit} type="submit" variant="contained" color="primary">Submit Information</Button>
            { console.log(this.state.showButton)}
            { this.state.showButton && <Button onClick={this.handleShowModal}  variant="contained" color="primary">Proceed</Button> }
          </span>

推荐阅读