在reduxjs/toolkit中，第一个dispatch()上的action.paylod未定义，第二个dispatc

Question

我不明白为什么在第一次调用dispatch((时，作为prop传递的数据(然后由reducer读取(是未定义的，但当我立即再次调用dispach((时它会传递正确的值。

这就是store.ts的定义

import addEditLuxmedBenefitSystemsSlice from 'pages/edit-blind/redux/add-edit-benefits-slice';
import { PreloadedState } from 'redux';
export const reducer = combineReducers({
addEditLuxmedBenefitSystemsSlice: addEditLuxmedBenefitSystemsSlice,
});
export type RootState = ReturnType<typeof reducer>;
export function setupStore(preloadedState?: PreloadedState<RootState>) {
return configureStore({
reducer,
preloadedState,
});
}

这是我的切片：

import { createSlice } from '@reduxjs/toolkit';
import { LuxmedBenefitUserType, BenefitSystemsUserType } from '../types';
export const addEditLuxmedBenefitSystemsSlice = createSlice({
name: 'addEditLuxmedSlice',
initialState: [] as LuxmedBenefitUserType[],
reducers: {
addEditBenefits: (state, action) => {
const { id } = action.payload;
console.log(id);
if (!state.length) {
state.push(action.payload);
}
},
},
});
export default addEditLuxmedBenefitSystemsSlice.reducer;
export const addEditLuxmedBenefitSystemsActions = addEditLuxmedBenefitSystemsSlice.actions;

下面是如何在onSubmit函数中调用dispatch((：

export const LuxmedBenefitComponent = () => {
const { currentEditBlind } = useSelector((state: RootState) => state.editBlind);
const { id, name, lastName, profileName } = currentEditBlind!;
const userProps = { id, name, lastName, profileName };
const [luxmedBenefitUser, setLuxmedBenefitUser] = useState<UserLuxmedBenefitType>();
const [isFormSubmitted, setIsFormSubmitted] = useState<boolean>(false);
const dispatch = useDispatch();
const displayParagraphHandler = () => {
setIsFormSubmitted(true);
setTimeout(() => {
setIsFormSubmitted(false);
}, 4000);
};
const { values, handleChange, handleSubmit, resetForm } = useFormik({
initialValues: {
contractForm: '',
userRelation: '',
offerType: '',
totalPrice: '',
employerCost: '',
employeeCost: '',
comments: '',
},
onSubmit: (values) => {
setLuxmedBenefitUser({ ...userProps, ...values });
resetForm();
displayParagraphHandler();
dispatch(addEditLuxmedBenefitSystemsActions.addEditBenefits(luxmedBenefitUser));
},
});

Answer 1

useState挂钩是异步的。

在onSubmit内部，调用setLuxmedBenefitUser，然后尝试使用最新更新的luxmedBenefitUser。但是，由于是异步的，它还没有更新。

只需将新值存储为自己的变量，这样您就可以在两种情况下使用它：

onSubmit: (values) => {
const updatedLuxmedBenefitUser = {...userProps, ...values};
setLuxmedBenefitUser(updatedLuxmedBenefitUser);
resetForm();
displayParagraphHandler();
dispatch(addEditLuxmedBenefitSystemsActions.addEditBenefits(updatedLuxmedBenefitUser));
},