我一直在开发具有以下依赖项的 Next.js 应用程序:
"react": "^16.9.0",
"react-redux": "^5.0.7",
"redux": "^4.0.4",
我创建 stepsNameThatMustBeShown
的 redux 操作之一(redux 状态的属性)是:export const setInitialSteps = () => {
//.....
// some codes that creates the stepsNameThatMustBeShown array
//....
return {
type: ActionTypes.SET_QUICK_RESUME_GENERATOR_MODAL_INITIAL_STEPS,
data: stepsNameThatMustBeShown
}
};
我在我的应用程序的两个不同地方使用了这个片段,一个类组件和一个函数式组件。<button onClick = {
async () => {
await this.props.setInitialSteps();
if (this.props.stepsNameThatMustBeShown.length > 1) {
this.props.setCurrentStep(this.props.stepsNameThatMustBeShown[0]);
this.props.setQuickResumeDisplayStatus(true);
this.props.setUnUpdatedStepsName([...this.props.stepsNameThatMustBeShown]);
}
}}>
Open
</button>
//....
//...
const mapStateToProps = (state) => {
return {
stepsNameThatMustBeShown: state.quickResumeGeneratorModal.stepsNameThatMustBeShown,
};
};
function mapDispatchToProps(dispatch) {
return {
setQuickResumeDisplayStatus: bindActionCreators(setQuickResumeDisplayStatus, dispatch),
setInitialSteps: bindActionCreators(setInitialSteps, dispatch),
setCurrentStep: bindActionCreators(setCurrentStep, dispatch),
setUnUpdatedStepsName: bindActionCreators(setUnUpdatedStepsName, dispatch),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(resultTest);
显然,我没有使用this.props
在一个功能组件中。代码片段中的所有这些函数都是 redux 操作。在代码片段中,我更新了 redux 状态的属性,并在更新后立即使用它。在类组件中,async 和 await 关键字按我们的预期工作,但在功能组件中,await 关键字不能正常工作。我阅读了该社区中存在的一些相关问题,但没有一个无法帮助我解决问题。
最佳答案
您需要使用 react-redux 7.1 或更高版本才能使用 const dispatch = useDispatch()
在您的功能组件中,然后调用 dispatch()
在您的 onClick 处理程序中。
在您的功能组件中使用:
const dispatch = useDispatch()
然后您的处理程序将如下所示:<button onClick = {
async () => {
const action = this.props.setInitialSteps(); // <======
dispatch(action); // <=====
if (this.props.stepsNameThatMustBeShown.length > 1) {
this.props.setCurrentStep(this.props.stepsNameThatMustBeShown[0]);
this.props.setQuickResumeDisplayStatus(true);
this.props.setUnUpdatedStepsName([...this.props.stepsNameThatMustBeShown]);
}
}}>
Open
</button>
再次所有async
在您的用例中不需要您拥有的东西。
关于javascript - Redux action 和 async/await 函数在类组件和函数中具有不同的行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64850166/