ReactJS Redux：未捕获的 TypeError：无法读取未定义的属性（读取“类型”）答案

【问题标题】：ReactJS Redux: Uncaught TypeError: Cannot read properties of undefined (reading 'type')ReactJS Redux：未捕获的 TypeError：无法读取未定义的属性（读取“类型”）
【发布时间】：2022-01-02 18:11:29
【问题描述】：

在 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)

减速机商店：

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);
//...

【问题讨论】：

您似乎使用的是 Redux Toolkit 中的createReducer？你能展示一下你是如何使用它的吗？
@HanchenJiang 我已经更新了问题。
所以你在组件中调度的动作由getResult返回，partnerApiStart返回。您能否也显示partnerApiStart 的代码？我看到您有类似 filterUpdated 的操作由工具包创建，但您似乎想采用不同的方法来创建此 getResult 操作？
@HanchenJiang 我也添加了 API 中间件的东西。检查更新的问题。在那里，我正在对后端进行 Axios API 调用。至于 filterUpdated 那是一个减速器，这与此无关。

标签： javascript reactjs redux react-redux

【解决方案1】：

我认为（至少其中一个）问题在于partnerApiStart 是一个动作创建者，它是一个函数，而不是一个动作。所以partnerApiStart.type 应该是undefined 在这里action.type !== partnerApiStart.type。我怀疑这与您看到的错误有关，但没有直接解释空指针。

参考：createActionhttps://redux-toolkit.js.org/api/createAction 的文档

【讨论】：

我对 api（中间件）的任何其他调用都没有遇到这个问题。所以我认为问题不在于中间件。