簡體   English   中英

ReactJS Redux:未捕獲的類型錯誤:無法讀取未定義的屬性(讀取“類型”)

[英]ReactJS Redux: Uncaught TypeError: Cannot read properties of undefined (reading 'type')

在 DidMount 上的 MainComponent class 內部,我正在運行以下命令:

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

我認為(至少一個)問題在於partnerApiStart是一個動作創建者,它是一個 function,而不是一個動作。 所以partnerApiStart.type應該在這里undefined action.type.== partnerApiStart.type 我懷疑這與您看到的錯誤有關,但沒有直接解釋 null 指針。

參考: createAction https://redux-toolkit.js.org/api/createAction的文檔

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM