类型错误：无法使用 react-redux 读取未定义的属性“地图”

Question

TypeError：无法读取未定义的属性“地图”

我尝试了很多，我无法解决这个问题请帮助我，我的后端正在工作，但这是我的问题，我正在使用 redux，我的 map 正在使用 useState 模式，但我需要使用 Z7490FE17CAEC3273F2299DE65086 升级我的代码但这是我的问题

这是我的 HomeScreen.js

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Row, Col } from 'react-bootstrap';
import Product from '../components/Product';
import { listProducts } from '../actions/productActions';

const HomeScreen = () => {
    const dispatch = useDispatch();

    const productList =useSelector(state => state.productList );
    const { loading, error, products } = productList;

    useEffect(() => {
        dispatch(listProducts())
    }, [dispatch]); 

    return (
        <>    
            <h1>Latest Products</h1>
            { loading ? (
                <h2>Loading...</h2>
            ) : error ? (
                <h3>{error}</h3>
            ) : (
            <Row>
                {products.map((product) => (
                    <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
                        <Product product={product} />
                    </Col>
                ))}
            </Row>
            )}
        </>
    )
}

export default HomeScreen

这是我的 productReducers.js

import { 
    PRODUCT_LIST_REQUEST,
    PRODUCT_LIST_SUCCESS,
    PRODUCT_LIST_FAIL
} from '../constants/productConstants';

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

这是我的 productAction.js

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

export const listProducts = () =>  async (dispatch) => {
    try {
        dispatch({ type: PRODUCT_LIST_REQUEST })

        const { data } = await axios.get('/api/products')

        dispatch({
            type: PRODUCT_LIST_SUCCESS,
            payload: data
        })
    } catch (error) {
        dispatch({
            type: PRODUCT_LIST_FAIL,
            payload: error.response && error.response.data.message 
                ? error.response.data.message 
                : error.message,
        })
    }
}

这是我的 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';

这是我的 store.js

import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import { productListReducer } from './reducers/productReducers';

const reducer = combineReducers({
    productList: productListReducer,
});

const initialState = {};

const middleware = [thunk];

const store = createStore(reducer, initialState, 
composeWithDevTools(applyMiddleware(...middleware)));


export default store;

Answer 1

减速机有错别字。 它应该是products ，而不是product

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

尝试在任何地方打印日志，以便您可以轻松调试它。

1. 在您的操作中打印数据。 检查您是否获得了预期的数据。
2. 如果是，go 到减速机。 在返回之前打印action.paylod和更新的商店内容。
3. 现在，如果这两种情况都是正确的，那么您就有了数据。 Go 组件并打印productList 。 检查您是否拥有所需的数据。