ReactJS Redux:未捕获的类型错误:无法读取未定义的属性(读取‘类型’)
2022-01-02
1665
在 DidMount 上的 MainComponent 类中,我正在运行以下命令:
getResultsSearchURL = () => {
if (this.props.tokenized && this.props.match.params.searchQuery) {
console.log("tokenized");
this.props.dispatch(
getResult({
key: this.props.match.params.searchQuery,
})
);
}
};
componentDidMount() {
console.log("mounted");
this.getResultsSearchURL();
}
而在 Redux 中,目前仅记录到控制台:
export const getResult = (item) => console.log({ item });
是什么导致了这些错误?我在这里做错了什么吗?
出现以下错误:
Uncaught TypeError: Cannot read properties of undefined (reading 'type')
at reducer (createReducer.ts:233)
at reducer (createSlice.ts:325)
at MainContainer.getResultsSearchURL (MainContainer.jsx:43)
at MainContainer.componentDidMount (MainContainer.jsx:53)
at commitLifeCycles (react-dom.development.js:20663)
at commitLayoutEffects (react-dom.development.js:23426)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at commitRootImpl (react-dom.development.js:23151)
react-dom.development.js:20085 The above error occurred in the <MainContainer> component:
at MainContainer (http://localhost:3000/static/js/bundle.js:7157:5)
at ConnectFunction (http://localhost:3000/static/js/bundle.js:54017:68)
at Route (http://localhost:3000/static/js/bundle.js:57231:29)
at Switch (http://localhost:3000/static/js/bundle.js:57433:29)
at Portal (http://localhost:3000/static/js/bundle.js:7523:5)
at ConnectFunction (http://localhost:3000/static/js/bundle.js:54017:68)
at Router (http://localhost:3000/static/js/bundle.js:56862:30)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:56484:35)
at Fe (http://localhost:3000/static/js/bundle.js:63987:60)
at ye (http://localhost:3000/static/js/bundle.js:63821:61)
at Provider (http://localhost:3000/static/js/bundle.js:53729:20)
at Partner
createReducer.ts:233 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'type')
at reducer (createReducer.ts:233)
at reducer (createSlice.ts:325)
at MainContainer.getResultsSearchURL (MainContainer.jsx:43)
at MainContainer.componentDidMount (MainContainer.jsx:53)
at commitLifeCycles (react-dom.development.js:20663)
at commitLayoutEffects (react-dom.development.js:23426)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at commitRootImpl (react-dom.development.js:23151)
Reducer 存储:
const reducer = combineReducers({
authenticator,
alert,
search,
body,
});
const store = configureStore({
reducer,
middleware: [...getDefaultMiddleware(), api],
});
export default store;
切片:
const slice = createSlice({
name: "u/Body",
initialState: {
loading: false,
search: {
list: [],
listFiltered: [],
availableStock: false,
supplierStock: {
code: [],
list: [],
loading: false,
updated: true,
},
},
},
reducers: {
searchStarted: (body, action) => {
body.loading = true;
body.search.listFiltered = [];
body.search.supplierStock.code = [];
body.search.supplierStock.list = [];
const filterKeys = Object.keys(body.search.filter);
filterKeys.forEach((k) => {
body.search.filter[k].list = [];
});
},
searchRecieved: (body, action) => {
body.search.list = action.data.l;
body.search.supplierStock.code = action.data.c;
body.loading = false;
const filterKeys = Object.keys(body.search.filter);
//...
},
//...
},
});
export const { filterUpdated } = slice.actions;
export default slice.reducer;
export const getResult = (item) =>
partnerApiStart({
url: "/search/result",
method: "post",
authenthicateRequired: true,
onStart: slice.actions.searchStarted.type,
onSuccess: slice.actions.searchRecieved.type,
//onError: slice.actions.searchFailed.type,
data: { k: item.key },
});
API 中间件:
export const partnerApiStart = createAction("UNI/API/started");
const api = (store) => (next) => async (action) => {
console.log(action);
if (action.type !== partnerApiStart.type) {
return next(action);
}
next(action);
//...
1个回答
我认为(至少其中一个)问题是
partnerApiStart
是一个动作创建器,它是一个函数,而不是一个动作。因此
partnerApiStart.type
在此处应该是
undefined
action.type !== partnerApiStart.type
。我怀疑这与您所看到的错误有关,但并不能直接解释空指针。
参考:
createAction
的文档
https://redux-toolkit.js.org/api/createAction
Hanchen Jiang
2022-01-02