Javascript React redux prop对象属性未定义

我是一个新的反应Redux。我不确定我的代码出了什么问题。终端上没有错误，但当我查看浏览器时，有一个TypeError。道具上有物品产品。我想知道为什么在我尝试访问属性时它会返回错误

productDescription.js

productReducer.js

根部减压器

---

通过这样做，您可以快速检查是否有来自axios的数据（这将防止任何未定义或空值）

dispatch（fetchProductsAccess（response.data | |无数据））

此外，还应按如下方式返回减速器中的状态：

case "FETCH_PRODUCTS_SUCCESS":
      return {
        ...state,
        loading: false,
        products: action.payload,
        error: "",
      };

    case "FETCH_PRODUCTS_ERROR":
      return {
        ...state,
        loading: false,
        products: [],
        error: action.payload,
      };

你的

可能返回一个空数组，这意味着您将无法在视图中检索该对象

<h4>{this.props.itemsProduct[0].name}</h4>

{this.props.itemsProduct[0].name}
在reducer中，您实际上没有为产品设置任何状态您的Axios Get请求获取数据，对吗？您可以在浏览器的开发者屏幕（f12）上的网络选项卡上进行检查。是的。我能够看到道具上的数据，但当我尝试在呈现方法上访问它时，如下面所示。props.itemsProduct[0]。name它返回一个未定义属性的TypeError。感谢您的建议。我已经尝试应用它，但输出仍然是一样的。我想知道为什么我不能编写这样的代码。props.itemsProduct[0]。name，因为它只返回一个对象，因为我在MapStateTrops上对它进行了筛选。但当我绘制地图时，它实际上是有效的。这是我能做的最好的方法吗？@bbarriatos你能展示一下
state.rootProduct.products
的内容吗？我想出来了。不过我不确定这是否是最好的做法。我注意到我无法访问props属性的原因是render（）方法在componentDidMount（）之前。我所做的是将componentDidMount（）更改为componentWillMount（）
const initialState = {
  loading: true,
  products: [],
  error: "",
};

const productReducer = (state = initialState, action) => {
  switch (action.type) {
    case "FETCH_PRODUCTS_REQUESTS":
      return {
        ...state,
        loading: true,
      };

    case "FETCH_PRODUCTS_SUCCESS":
      return {
        loading: false,
        products: action.payload,
        error: "",
      };

    case "FETCH_PRODUCTS_ERROR":
      return {
        loading: false,
        products: [],
        error: action.payload,
      };
    default:
      return state;
  }
};

export default productReducer;

import { combineReducers } from "redux";

import productReducer from "./productReducer";

const rootReducer = combineReducers({
  rootProduct: productReducer,
});

export default rootReducer;

case "FETCH_PRODUCTS_SUCCESS":
      return {
        ...state,
        loading: false,
        products: action.payload,
        error: "",
      };

    case "FETCH_PRODUCTS_ERROR":
      return {
        ...state,
        loading: false,
        products: [],
        error: action.payload,
      };

itemsProduct: state.rootProduct.products.filter(
      (prod) => prod.id == ownProps.match.params.id
    ),

<h4>{this.props.itemsProduct[0].name}</h4>