当使用“SET_MAX_VALUE”类型的操作调用时，键“products”的切片缩减器返回未定义

Question

对不起，我希望你能帮忙。我正在使用 React 和 Redux 开发一个电子商务网站项目。我有一个价格过滤器组件，它由两个输入字段组成。第一个输入字段取最小值，第二个字段取最大值。

这是我的价格范围组件：

import React, {useEffect, useRef} from 'react';
import {useDispatch, useSelector} from 'react-redux';
import * as actions from '../../store/actions/index';
import '../../styles/components/priceRanges.css';

const PriceRanges = (props) => {
    const minInputValue = useSelector((state) => state.products.minValue);
    const maxInputValue = useSelector((state) => state.products.maxValue);
    const minDefaultValue = useSelector((state) =>
        Math.min(...state.products.products.map((p) => p.price)),
    );
    const maxDefaultValue = useSelector((state) =>
        Math.max(...state.products.products.map((p) => p.price)),
    );

    const dispatch = useDispatch();

    const minInputRef = useRef();
    const maxInputRef = useRef();

    useEffect(() => {
        const timer = setTimeout(() => {
            if (
                minInputValue === minInputRef.current.value &&
                maxInputValue === maxInputRef.current.value
            ) {
                return dispatch(actions.filterByPrices(minInputValue, maxInputValue));
            }
        }, 800);
        return () => {
            clearTimeout(timer);
        };
    }, [dispatch, maxInputValue, minInputValue]);

    return (
        <div className="price-range-container">
            <div className="price-range-input-row row">
                <div className="price-range-input">
                    <input
                        ref={minInputRef}
                        id="min-input"
                        name="min-input"
                        type="text"
                        className="price-min-range"
                        placeholder={minDefaultValue}
                        onChange={(e) => dispatch(actions.setMinInputValue(e.target.value))}
                        value={minInputValue}
                    />
                </div>
                to
                <div className="price-range-input">
                    <input
                        ref={maxInputRef}
                        type="text"
                        className="price-max-range"
                        placeholder={maxDefaultValue}
                        onChange={(e) => dispatch(actions.setMaxInputValue(e.target.value))}
                        value={maxInputValue}
                    />
                </div>
            </div>
        </div>
    );
};

export default PriceRanges;

这也是我的 SET_MAX_VALUE 操作和帮助函数的代码，用于设置最大值和按价格过滤产品，

export const setMaxInputValue = (maxValue) => ({
    type: actionTypes.SET_MAX_VALUE,
    maxValue,
});
export const filterByPrices = (minPrice, maxPrice) => ({
    type: actionTypes.FILTER_BY_PRICES,
    minPrice: Number(minPrice),
    maxPrice: Number(maxPrice),
});

const initialState = {
    products: [],
    filteredProducts: [],
    productId: '',
    product: '',
    minValue: '',
    maxValue: '',
    minPrice: '',
    maxPrice: '',
    checkedCategories: [],
    categories: [],
    loadingProducts: false,
    errorFetchingProducts: false,
    errorFetchingCategories: false,
};

const filterByPrices = (state, action) => {
    let updatedFilteredProducts;
    let minPrice = 0;
    let maxPrice = 0;

    if (action.minPrice === 0 || action.maxPrice === 0) {
        return updateObjects(state, {
            filteredProducts: [...state.products],
            minPrice: minPrice,
            maxPrice: maxPrice,
        });
    } else {
        minPrice += action.minPrice;
        maxPrice += action.maxPrice;
        if (maxPrice >= minPrice) {
            updatedFilteredProducts = [
                ...state.products.filter(
                    (p) => p.price >= minPrice && p.price <= maxPrice,
                ),
            ];
            return updateObjects(state, {
                filteredProducts:
                    updatedFilteredProducts.length > 0 && updatedFilteredProducts,
                minPrice: minPrice,
                maxPrice: maxPrice,
            });
        }

        return updateObjects(state, {
            filteredProducts: [...state.filteredProducts],
            minPrice: minPrice,
            maxPrice: maxPrice,
        });
    }
};

一切正常，直到我尝试删除其中一个输入文本字段中的插入值。一旦从文本字段中清除输入值，就会发生错误：

错误：当使用“SET_MAX_VALUE”类型的操作调用时，键“products”的切片缩减器返回未定义。要忽略某个操作，您必须显式返回之前的状态。如果你希望这个 reducer 不保存任何值，你可以返回 null 而不是 undefined。

我想我理解为什么会发生这种情况，但我想知道是否有人可以向我解释为什么会发生这种情况，以及我将来可以做些什么来避免这个错误或错误。

Answer 1

返回 null 而不是 undefined。

export const setMaxInputValue = (maxValue) => ({
    type: actionTypes.SET_MAX_VALUE,
    maxValue: maxValue || null,
});