开发者问题收集

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