javascript - 为什么移动对象后出现未处理的拒绝（TypeError）错误：无法读取 Redux 应用程序中未定义的属性“过滤器”？

Question

我有 redux 应用程序。在这个应用程序中，我的文件很少，但我只会写两个我修改过的文件：

index.js：

const store = createStore(
  reducer, 
  {
    propReducer: {
      day: 1,
      data: [],
      filteredData: [],
      search: "",
      shift: "departure"
    }
  },
  applyMiddleware(thunk)
);

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRoot />
  </Provider>,
  document.getElementById("root")
);

planes.js（减速器）：

import { searchFilter } from "../containers/app";

export function reducer(state = {}, action) {
  switch (action.type) {
    case "SET_SHIFT":
      return Object.assign({}, state, {
        shift: action.shift
      });
    case "SET_SEARCH":
      return Object.assign({}, state, {
        search: action.search.toLowerCase()
      });
    case "RUN_FILTER":
      var newData = state.data[action.shift || state.shift].filter(x => {
        return (
          x["planeTypeID.code"].toLowerCase().includes(action.search || state.search)
        );
      });
      return Object.assign({}, state, {
        shift: action.shift || state.shift,
        search: action.search || state.search,
        filteredData: searchFilter(state.search, newData)
      });
    case "LOAD_DATA_START":
      return Object.assign({}, state, {
        day: action.day
      });
    case "LOAD_DATA_END":
      var newData = action.payload.data[state.shift].filter(x => {
        return (
          x["planeTypeID.code"] &&
          x["planeTypeID.code"].toLowerCase().includes(action.search || state.search)
        );
      });
      return Object.assign({}, state, {
        data: action.payload.data,
        shift: Object.keys(action.payload.data)[0],
        filteredData: searchFilter(state.search, newData)
      });
    default:
      return state;
  }
}

但是有人告诉我要改变一些东西。我的对象，目前在 index.js(action) 中，createStore方法的第二个参数需要移动到 state reducer。

我试着这样做：

index.js：

const store = createStore(
  reducer,                       // here I deleted
  applyMiddleware(thunk)
);

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRoot />
  </Provider>,
  document.getElementById("root")
);

planes.js（减速器）：

import { searchFilter } from "../containers/app";

export function reducer(state = {propReducer: {    //and here I put the object
      day: 1,
      data: [],
      filteredData: [],
      search: "",
      shift: "departure"
    }}, action) {
  switch (action.type) {
    case "SET_SHIFT":
      return Object.assign({}, state, {
        shift: action.shift
      });
    case "SET_SEARCH":
      return Object.assign({}, state, {
        search: action.search.toLowerCase()
      });
    case "RUN_FILTER":
      var newData = state.data[action.shift || state.shift].filter(x => {
        return (
          x["planeTypeID.code"].toLowerCase().includes(action.search || state.search)
        );
      });
      return Object.assign({}, state, {
        shift: action.shift || state.shift,
        search: action.search || state.search,
        filteredData: searchFilter(state.search, newData)
      });
    case "LOAD_DATA_START":
      return Object.assign({}, state, {
        day: action.day
      });
    case "LOAD_DATA_END":
      var newData = action.payload.data[state.shift].filter(x => {
        return (
          x["planeTypeID.code"] &&
          x["planeTypeID.code"].toLowerCase().includes(action.search || state.search)
        );
      });
      return Object.assign({}, state, {
        data: action.payload.data,
        shift: Object.keys(action.payload.data)[0],
        filteredData: searchFilter(state.search, newData)
      });
    default:
      return state;
  }
}

但我有错误：

如何修复此错误？

沙盒中的所有项目代码：

https://codesandbox.io/s/redux-ant-design-filter-table-column-with-slider-o149z

标签： javascriptreactjsredux

Answer 1

当它处于预加载状态时，它应该是这种方式

{
    propReducer: {
      day: 1,
      data: [],
      filteredData: [],
      search: "",
      shift: "departure"
    }
  }

如果它在同一个减速器中，则将其分配为

state = {
      day: 1,
      data: [],
      filteredData: [],
      search: "",
      shift: "departure"
    }

顺便说一句，删除<Header />并<Footer />在 app.js 中运行而不会出现跨源错误。您不会在 app.js 中的任何地方导入这些组件

遇到你提到的错误，如果对象没有密钥，那么显然它将返回 undefined ..在 undefined 变量上应用过滤器方法会抛出该错误..

调试代码的简单方法是使用一些控制台语句，例如：-

console.log("shift",state.shift)
console.log("data",action.payload.data)
console.log("filteredData",action.payload.data[state.shift])