首页 > 解决方案 > 未处理的拒绝(TypeError):无法读取未定义的属性“someProperty”

问题描述

当我按下“Marcar”按钮时出现此错误:

在此处输入图像描述

我的“Marcar”按钮触发了这个重击:

import axios from "axios";
import { addNewNote, binnacleNoteReview, loadBinnacleNotes } from "../Actions/notes.actions";

export const markNoteReview = (role, binnacle, noteNumber) => async (dispatch, getState) => {
   const response = await axios.post("http://localhost:5000/markNoteAsReviewed", {
      role,
      binnacle,
      noteNumber,
   });
   if (response.data.error) {
      alert("Something went wrong");
   }
   if (!response.data.error) {
   }
   dispatch(binnacleNoteReview(noteNumber, role));
};

这个 thunk 触发这个动作并发送:

export const BINNACLE_NOTE_REVIEW = "BINNACLE_NOTE_REVIEW";
export const binnacleNoteReview = (noteNumber, role) => ({
  type: BINNACLE_NOTE_REVIEW,
  payload: {
    noteNumber,
    role,
  },
});

减速器看起来像这样(这是我得到错误的地方):

案例中出现的错误:

case BINNACLE_NOTE_REVIEW:

在行中:

return state.notes.binnacleNotes.map((note) => {

减速器:

import { LOAD_BINNACLE_NOTES, BINNACLE_NOTE_REVIEW, ADD_NEW_NOTE, RESET_BINNACLE_NOTES } from "../Actions/notes.actions";

export const notes = (state = [], action) => {
   const { type, payload } = action;
   switch (type) {
      case LOAD_BINNACLE_NOTES:
         const { binnacleNotes } = payload;
         return {
            ...state,
            binnacleNotes,
         };
      case ADD_NEW_NOTE:
         const { id, date, binnacle_note, responsible, attachments, constructor_review, super_review, dro_review, timestamp } = payload;
         return {
            binnacleNotes: [
               ...state.binnacleNotes,
               {
                  id,
                  date,
                  binnacle_note,
                  responsible,
                  attachments,
                  constructor_review,
                  super_review,
                  dro_review,
                  timestamp,
               },
            ],
         };

      case BINNACLE_NOTE_REVIEW:
         const { noteNumber, role } = payload;
         return state.notes.binnacleNotes.map((note) => {
            switch (role) {
               case "super":
                  return {
                     ...state,
                     binnacleNotes: state.notes.binnacleNotes.map((note) => (note.id === action.id ? { ...notes, super_review: 1 } : note)),
                  };

               case "dro":
                  if (note.id == noteNumber) {
                     return {
                        ...note,
                        binnacleNotes: state.notes.binnacleNotes.map((note) => (note.id === action.id ? { ...notes, dro_review: 1 } : note)),
                     };
                  } else {
                     return note;
                  }

               case "constructor":
                  if (note.id == noteNumber) {
                     return {
                        ...note,
                        binnacleNotes: state.notes.binnacleNotes.map((note) => (note.id === action.id ? { ...notes, constructor_review: 1 } : note)),
                     };
                  } else {
                     return note;
                  }

               default:
                  return state;
            }
         });
      case RESET_BINNACLE_NOTES:
         return (state = []);
      default:
         return state;
   }
};

我的商店是这样的:

在此处输入图像描述

知道发生了什么吗?

编辑:

解决了之前的错误后:现在我的减速器/存储有这种行为:

我的对象按其存储属性及其值的顺序更改:

前:

在此处输入图像描述

后:

在此处输入图像描述

标签: reactjsreduxreducersredux-reducers

解决方案


因为BINNACLE_NOTE_REVIEWnotes减速机中使用。所以状态是notes对象。不是父节点。

所以只需更改为state.binnacleNotes.map(...)


推荐阅读