无法读取 React-redux 上未定义错误的属性“地图”，尽管使用道具而不是 state

Question

I missed sth but idk really. In similar questions, I saw reason of this error is using this.sth.state.map() instead of this.sth.props.map() . But I use props. I pull my datas from api which I create. I gave products:[] as initial state.

Btw, I did it for categories too. I create categories: [] and it works well. I can see my categories on my browser. I have done same things again for products but im in trouble with map func. this time. What could be the problem?

When I delete the code that I mentioned below with arrow, I didn't get any error but I couldn't see products.

My ProductList.js file;

import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { Badge } from "reactstrap";
import { Table } from "reactstrap";
import * as productActions from "../../redux/actions/productActions";

class ProductList extends Component {
  componentDidMount() {
    this.props.actions.getProducts();
  }
  render() {
    return (
      <div>
        <Badge color="warning">Products of </Badge>
        <Badge color="success">{this.props.currentCategory.categoryName}</Badge>
        <Table>
          <thead>
            <tr>
              <th>#</th>
              <th>Product Name</th>
              <th>Unit Price</th>
              <th>Quantity Per Unit</th>
              <th>Unit In Stock</th>
            </tr>
          </thead>
          <tbody>
  ------->> {this.props.products.map(product => (
              <tr key={product.id}>
                <th scope="row">{product.id}</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
                <td></td>
              </tr>
            ))}
          </tbody>
        </Table>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    currentCategory: state.changeCategoryReducer,
    products: state.ProductListReducer
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: {
      getProducts: bindActionCreators(productActions.getProducts, dispatch)
    }
  };
}

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

I set my initial state below as initialState.js

export default {
    currenCategory:{},
    categories :[ ],
    products : []
}

And productActions.js;

import * as actionTypes from "./actionTypes";


export function getProductsSuccess(products){
    return {type:actionTypes.GET_PRODUCTS_SUCCESS, payload:products}
}


export function getProducts() {
  return function(dispatch) {
    let url = "http://localhost:3000/products";
    return fetch(url)
      .then(response => response.json())
      .then(result => dispatch(getProductsSuccess(result)));
  };
}

ProductListReducer.js;

import * as actionTypes from '../actions/actionTypes'
import initialState from './initialState';

export default function productListReducer(state=initialState.products, action){
    switch (action.type) {
        case actionTypes.GET_PRODUCTS_SUCCESS:

            return action.payload

        default:
            return state;
    }
}

I combine reducers in my index.js

import {combineReducers} from "redux"
import changeCategoryReducer from './changeCategoryReducer'
import categoryListReducer from "./categoryListReducer"
import productListReducer from "./productListReducer"

const rootReducer = combineReducers({
    changeCategoryReducer,
    categoryListReducer,
    productListReducer
})

export default rootReducer;

My store.js;

export default function configureStore(){
    return createStore(rootReducer,applyMiddleware(thunk))
}

And I add my store to my main index.js within the provider brackets.

But I think the problem is about sth minor for ex. about a defination. Because, I did same things while listing categories and it works fine.

Answer 1

In your component you have used the wrong variable from the store.

function mapStateToProps(state) {
  return {
    currentCategory: state.changeCategoryReducer,
    products: state.productListReducer
  };
}

If you notice the P in store is small where as in component you have adde in capital letters.