Question

我的减速器有错误：

道具actual-这是飞机起飞或到达的时间，此属性位于我的API中 API具有以下结构：

{"body":{
"departure":[{actual: value},{term: value}],
"arrival":[{....},{......}]}
}

代码：

airplanes.js（减速机）

import { searchFilter } from "../components/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].filter(x => {
        return (
          x.actual &&
          x.actual.includes(
            state.day
              .split("-")
              .reverse()
              .join("-")
          )
        );
      });
      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.actual &&
          x.actual.includes(
            action.payload.day
              .split("-")
              .reverse()
              .join("-")
          )
        );
      });
      return Object.assign({}, state, {
        data: action.payload.data,
        shift: Object.keys(action.payload.data)[0],
        filteredData: searchFilter(state.search, newData)
      });
    default:
      return state;
  }
}

app.js（主要组件）

import React from "react";
import { Component } from "react";
import { connect } from "react-redux";
import { fetchData } from "../actions";
import TableData from "./TableData";
import TableSearch from "./TableSearch";
import Header from "./Header";
import Footer from "./Footer";
import "./app.css";

export function searchFilter(search, data) {
  return data.filter(n => n.term.toLowerCase().includes(search));
}

const days = ["23-08-2019", "24-08-2019", "25-08-2019"];

class Root extends React.Component {
  componentDidMount() {
    this.props.onFetchData(days[this.props.propReducer.day]);
  }

  render() {
    const { onFilter, onSetSearch, onFetchData } = this.props;

    const { search, shift, data, filteredData } = this.props.propReducer;

    console.log(filteredData);

    return (
      <div>
        <Header/>
        <h1>SEARCH FLIGHT</h1>
        <TableSearch
          value={search}
          onChange={e => onSetSearch(e.target.value)}
          onSearch={() => onFilter()}
        />

        {days &&
          days.map((day, i) => (
            <button
              key={day}
              onClick={() => onFetchData(day)}
              className={i === day ? "active" : ""}
            >
              {day}
            </button>
          ))}
        <br />
            <div className="buttonShift">
        {data &&
          Object.keys(data).map(n => (

            <button 
              data-shift={n}
              onClick={e => onFilter({ shift: e.target.dataset.shift })}
              className={n === shift ? "active" : "noActive"}
            >
              {n} 
            </button>
          ))}
          </div>
        {data && <TableData data={filteredData} />}
        <Footer/>
      </div>
    );
  }
}

export const ConnectedRoot = connect(
  state => state,
  dispatch => ({
    onFilter: args => dispatch({ type: "RUN_FILTER", ...args }),
    onSetSearch: search => dispatch({ type: "SET_SEARCH", search }),
    onFetchData: day => dispatch(fetchData(day))
  })
)(Root);

通过将函数searchFilter写入属性term而不是属性actual的方式。也许问题可能部分是由于此，而不仅是因为，因为我尝试将term替换为actual，但错误仍然存在。

如何解决此错误？

Answer 1

在onFilter中赋予app.js动作创建者：

onFilter: args => dispatch({ type: "RUN_FILTER", ...args })

在没有第一个参数的情况下调用：

<TableSearch ... onSearch={() => onFilter()} />

然后在airplanes.js减速器中，action.shift是未定义的，因此state.data[action.shift]也未定义，并且state.data[action.shift].filter是TypeError。

要修复，可以使用默认值：

state.data[action.shift || state.shift].filter

但是，在您呼叫的TableSearch.js内部还有另一个问题：

<button ... onClick={() => onSearch(value)}>

因此，您不应忽略app.js中的值：

<TableSearch ... onSearch={(value) => onFilter({search: value})} />

...并根据业务逻辑在action.search || state.search中使用.filter(...)。

Redux应用程序：无法读取未定义的属性“ filter”

1 个答案: