Question

我的过滤器有问题。我有2个用于过滤卡片的按钮。但是当我使用过滤器转到我的页面时，我遇到了这个问题：

未捕获的错误：给定操作“ SET_VISIBILITY_FILTER”，减速器“ visibilityFilter”返回未定义。要忽略动作，必须显式返回先前的状态。如果不希望该减速器保持任何值，则可以返回null而不是未定义。

这是我的代码：

Products.js

import Filter from '../filter/Filter';

class Products extends React.Component {

constructor(props) {
    super(props);
}

componentDidMount() {
    this.props.getAdvert();
    this.props.setVisibilityFilter();
}

renderProducts = ({filteredAdverts}) => {
    if (filteredAdverts) {
        return filteredAdverts.map(product => {
            return (
                <Card key={product.id} advertItem={product}/>
            )
        })
    }
};

render() {
    return (
        <div>
           <h2>Products</h2>
                 <Filter/>
                 <div className="products__card-box mb-3">
                    {this.renderProducts(this.props.filteredAdverts)}
                </div>
        </div>
}

Filter.js

import FilterLink from './FilterLink';
import {SHOW_ALL, SHOW_STONES, SHOW_PANELS} from "../../actions/types";

const Filter = () => (
<div className="btn-group" role="group">
    <FilterLink filter={SHOW_STONES}>
        Stones
    </FilterLink>

    <FilterLink filter={SHOW_PANELS}>
        Panels
    </FilterLink>
</div>
);

export default Filter;

FilterLink.js 更新

import {connect} from 'react-redux';
import { setVisibilityFilter } from '../../actions/filter';

const FilterLink = ({active, children, onClick}) => {

if(active) {
    return <button>{children}</button>
}

return (
    <button
        className="btn advert__btn"
        onClick={onClick}
        disabled={active}
    >
        {children}
    </button>
)};

const mapStateToProps = (state, ownProps) => ({
   active: ownProps.filter === state.visibilityFilter
});

const mapDispatchToProps = (dispatch, ownProps) => {
conslo.log(ownProps.filter);
return {
onClick: () => {
  dispatch(setVisibilityFilter(ownProps.filter));
},};
};

export default connect(mapStateToProps, mapDispatchToProps)(FilterLink);

actions / filter.js

import {SET_VISIBILITY_FILTER} from "./types";

export const setVisibilityFilter = (filter) => ({
 type: SET_VISIBILITY_FILTER,
 filter
});

filter_reducer.js

import {SET_VISIBILITY_FILTER, SHOW_STONES} from "../actions/types";
const visibilityFilter = (state = SHOW_STONES, action) => {
switch (action.type) {
    case SET_VISIBILITY_FILTER:
        return action.filter;
    default:
        return state;
}};

export default visibilityFilter;

getVisibleProducts.js 更新

import { createSelector } from 'reselect'
import {SHOW_PANELS, SHOW_STONES, SHOW_ALL} from "../../actions/types";
const getVisibilityFilter = state => state.visibilityFilter;
const getAdverts = state => state.advert;

export const getVisibleProducts = createSelector(
[getVisibilityFilter, getAdverts],
(visibilityFilter, advert) => {
    console.log(advert);
      switch (visibilityFilter) {
          case SHOW_ALL:
              return advert;
          case SHOW_PANELS:
              return advert.filter(function(adv) {
                  return adv.title.includes('3d')
              });
          case SHOW_STONES:
              return advert.filter((adv) => {
                  return adv.title.includes('Декоративный')
              });
          default:
              throw new Error('Unknown filter ' + visibilityFilter);
}
});

更新 console.log（advert）向我展示了我所有产品的阵列，但是当我添加console.log（ownProps.filter）时，检查员会说：

未捕获的错误：未知的过滤器未定义

getVisibleProducts.js数组也带有未定义的products（consloe.log（advert））。

我非常感谢您为解决此问题提供的帮助。我尝试了许多解决方案，但没有一个对我有帮助。我不知道该怎么办...谢谢注意。

筛选器操作无法呈现用户界面

0 个答案: