时间戳

首页 > 解决方案 > 应该如何从功能组件中分派 reducer 的操作以使状态立即更改？

reactjs - 应该如何从功能组件中分派 reducer 的操作以使状态立即更改？

问题描述

我正在使用 reactjs 和 react-redux。我有一个减速器 PersonalReducer.js，它有一个我想在父组件中调度的动作。分派时，组件的状态在渲染时发生更改，但在分派操作后不会更改。

PersonalComponent.js

class Personal extends Component {

handleNext = () => {
        this.props.onNext();
        console.log(this.props.statePersonal); //LINE X
}
render() {
    console.log(this.props.statePersonal);//LINE Y
    // other code
    <Button
        variant="contained"
        color="primary"
        onClick={this.handleNext}
        className={classes.button}
    >NEXT
    </Button>
}
}

const mapStateToProps = (state) => {
  return {
    statePersonal: state.personal,
    stateAcademic: state.academic,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onNext: () => dispatch({type:actionTypes.HANDLE_NEXT_PERSONAL}),
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(withStyles(styles)(Profile));

PersonalReducer.js

const initialState = {
    firstName: '',
    valid: true,
}

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case actionTypes.HANDLE_NEXT_PERSONAL:
            return {
                ...state,
                valid: false,
                firstName: 'xyzzz',
            }
    }
    return state;
}

按下 NEXT 按钮后： LINE X 在控制台中打印：{ firstName: '', valid: true, } LINE Y 在控制台中打印：{ firstName: 'xyzzzz', valid: false, }

但我希望在 handleNext() 本身中更新此状态，以便我可以检查表单的有效性。我究竟做错了什么？如何使状态在handleNext 中立即更改？请帮助我已经过了我的最后期限。谢谢你的帮助 ：）

标签： reactjsreact-redux

解决方案

您在这里使用异步操作，它也链接到mapStateToProps。您可以使用componentDidUpdate方法检测道具更改并在那里检查表单的有效性。官方文档为：https ://reactjs.org/docs/react-component.html#componentdidupdate

推荐阅读