如何解决“类型错误：无法读取未定义的属性‘过滤器’”以及类似的其他数组函数，如使用 ReactJS 和 redux 的 map？

我正在学习教程，但此时我卡住了。当我尝试过滤 Product 数组时，它给了我 TypeError: Cannot read property ''filter'' of undefined。我根据教程使用 Axios 实现了相同的功能，并且它正在工作。然后讲师更改为 redux，我按照相同的步骤操作，这就是我收到错误的时候。我是 React 的新手，也是 Axios 和 Redux 的新手，我一直在试图找出问题所在，但一无所获。

这是我的 ProductScreens.jsx 发生错误的地方：

import React,{ useEffect } from "react";
import rating from "../Components/rating.jsx";
import { usedispatch,useSelector } from "react-redux";
import { listProducts } from "../actions/productActions.js"

function Sale({product}){
        if("salePrice" in product){
                return <li>Sale Price: ₹{product.salePrice}</li>;
        }
        else
            return null;
    }
export default function ProductsScreen(props){
        const dispatch = usedispatch();
        const productList = useSelector( state => state.productList);
        const {loading,error,products} = productList;
        useEffect(() =>{
                dispatch(listProducts());
        },[dispatch]);
        const product = products.filter(prod => prod.category === props.match.params.category && prod.subcategory === props.match.params.subcategory);
        return (
        <div className="container-fluid main-cards">
                <div className="row">
                {
                    product.map(product => (
                        <div key={product._id} className="col-12 col-md-6 col-lg-4 main-card-item">
                            <div className="card">
                                <a href={`/product/${product._id}`}><img src={product.mainImage} className="card-img-top" alt="..."></img></a>
                                <div className="card-body product-card list-group">
                                    <h5 className="card-title">{product.name}</h5>
                                    <p className="card-text">{product.description}</p>
                                    <ul className="list-unstyled mt-3 mb-4">
                                            <li>Price: ₹{product.price}</li>
                                            <Sale  product={product}/>
                                            <li><a href="#" className="card-link">Buy Now</a></li>
                                            <li>
                                                <rating rating={product.rating} numReview={product.numReview}/>
                                            </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    ))};
                
                </div>
        </div>
    )
}

这是我的 productActions.js

import Axios from "axios";
import { PRODUCT_LIST_REQUEST,PRODUCT_LIST_SUCCESS,PRODUCT_LIST_FAIL } from "../constants/productConstants"

export const listProducts = () => async (dispatch) =>{
    dispatch({
        type: PRODUCT_LIST_REQUEST,});
    try {
        const {data} = await Axios.get(''/api/products'');
        dispatch({type: PRODUCT_LIST_SUCCESS,payload : data});
    }catch(error){
        dispatch({type: PRODUCT_LIST_FAIL,payload: error.message});
    }
}

这是我的 productReducers.js

export const productListReducer = (state = {loading: true,products: [] },action) =>{
    switch(action.type){
        case PRODUCT_LIST_REQUEST :
            return {loading: true};
        case PRODUCT_LIST_SUCCESS:
            return {loading: false,products: action.payload};
        case PRODUCT_LIST_FAIL :
            return {loading: false,error: action.payload};
        default:
            return state;
    }
}

还有我的 productConstants.js

export const PRODUCT_LIST_REQUEST = "PRODUCT_LIST_REQUEST";
export const PRODUCT_LIST_SUCCESS = "PRODUCT_LIST_SUCCESS";
export const PRODUCT_LIST_FAIL = "PRODUCT_LIST_FAIL";

我已经尝试解决它，但我无法找出问题所在。我在 ProductScreens.jsx 中做了 console.log(products) 而不是 const product = products.filter(prod => prod.category === props.match.params.category && prod.subcategory === props.match.params.subcategory); 并且还用 return 替换了 <h1></h1> 的内容并得到了以下对象：

[
    {
        "_id": "1","name": "example1","category": "example category1","subcategory": "example subcategory1","image": [
            {
                "_id": "image1","name": "/images/example1.jpg"
            }
        ],"mainImage": "/images/example1.jpg","price": "19000","brand": "brand1","rating": 4.5,"numReview": 10,"description": "some description for example1."
    },{
        "_id": "2","name": "example2","image": [
            {
                "_id": "image2","name": "/images/example2.jpg"
            }
        ],"mainImage": "/images/example2.jpg","price": "16791","salePrice": "15500","brand": "brand2","rating": 4.7,"description": "some description for example2."
    },{
        "_id": "3","name": "example","category": "example category2","subcategory": "example subcategory3","image": [
            {
                "_id": "image3","name": "/images/example3-1.jpg"
            },{
                "_id": "image4","name": "/images/example3-2.jpg"
            },{
                "_id": "image5","name": "/images/example3-3.jpg"
            },{
                "_id": "image6","name": "/images/example3-4.jpg"
            }
        ],"mainImage": "/images/example3-1.jpg","price": "8549","salePrice": "7200","brand": "brand3","rating": 3,"description": "some description for example3."
    },{
        "_id": "4","name": "example4","category": "example category3","subcategory": "example subcategory4","image": [
            {
                "_id": "image7","name": "/images/example4.jpg"
            }
        ],"mainImage": "/images/example4.jpg","price": "450","brand": "brand4","description": "some description for example4."
    },{
        "_id": "5","name": "example5","subcategory": "example subcategory2","image": [
            {
                "_id": "image8","name": "/images/example5.jpg"
            }
        ],"mainImage": "/images/example5.jpg","price": "30000","salePrice": "27000","brand": "brand5","description": "some description for example5"
    }
]

看看上面的对象，filter() 应该可以工作，但不是。此外，上面的对象与我使用 axios 时得到的对象相同，当时它运行良好。所以我不知道为什么它不再起作用了。 此外，当我尝试 console.log(products._id) 或任何其他属性时，我得到相同的 TypeError。我试过 console.log(products[0]) 想也许我必须这样做才能得到第一个对象，因为它是一个对象数组，我得到了 TypeError: Cannot read property ''0'' of undefined。

解决方法