我有一个名为<SearchForm />
的组件,其中包含以下代码:
const insuranceDetails = useAppSelector((state) => state.search.insuranceDetails);
字符串useAppSelector
是一个围绕useSelector
的自定义钩子,它只为TS提供正确的类型推断。<SearchForm />
还具有以下模态:
<InsuranceDetailsModal
isOpen={isModalOpen}
onClose={handleModalClose}
/>
型
模态的基本部分:
const handleConfirm = () => {
dispatch(updateInsuranceDetails(insuranceDetails));
onClose();
};
型
基本上,这将调度一个操作来更新Redux商店,然后调用onClose
,这实际上是我们传入的handleModalClose
prop:
const handleModalClose = () => {
setIsModalOpen(false);
search();
};
型
这里的关键是search
函数,它在<SearchForm />
组件中,下面是search
函数的代码:
const search = async () => {
console.log(insuranceDetails);
};
型insuranceDetails
是我之前使用useAppSelector
钩子读到的。
问题是,我得到了insuranceDetails
的初始状态,其中对象内部的每个属性都是空的。
以下是我的切片供参考:
const searchSlice = createSlice({
name: 'search',
initialState: {
insuranceDetails: {
firstName: '',
lastName: '',
insurance: { key: '', value: '', label: '', code: '' },
birthDate: '',
memberId: '',
},
},
reducers: {
updateInsuranceDetails(state, action) {
state.insuranceDetails = action.payload;
},
},
});
export const { updateInsuranceDetails } = searchSlice.actions;
export default searchSlice.reducer;
型
我确信Redux正在更新状态,因为当我在search函数之外时,它会注销正确的值,而当试图从模态之外调用search时,它实际上是工作的。<SearchForm />
具有以下功能:
const handleSearchClick = async (e: React.MouseEvent<Element, MouseEvent>) => {
e.preventDefault();
search();
};
型
当我从<SearchForm />
本身而不是从modal调用它时,它工作得很好。
1条答案
按热度按时间bybem2ql1#
简而言之,您的
handleModalClose()
引用旧的search()
,它包含旧的insuranceDetails
。我相信你需要找到一种方法来告诉
SearchForm
在模态刚刚关闭和保险值insuranceDetails
更新时触发search()
。我认为修复应该是这样的:
InsuranceDetailsModal
个字符串
SearchForm
个型
请同时实现
shouldSearch
的missing state值和reducer。