React Redux没有上下文

问题描述 投票:1回答:1

在React Web上工作并使用react-redux,遇到错误(请参见下面的屏幕截图)。在构建应用程序时没有错误时,仅导航至该路径即可。似乎this.props无法访问redux上下文。不知道缺少什么?

对于另一个组件列出所有用户,相同的实现也可以正常工作。

enter image description here

enter image description here

Products.js

import React, { Component } from "react";
import { connect } from "react-redux";
import { GetAllProducts } from "../../redux/actions/ProductsActions";

export class Products extends Component {
   componentDidMount() {
      this.props.GetAllProducts();
   }
   render() {
      return (
         <div className="col-span-12">
            {(this.props.allProducts || []).map((product) => {
               return <div>{product.productName}</div>;
            })}
         </div>
      );
   }
}

const mapStateToProps = (state) => ({
   status: state.Products.status,
   allProducts: state.Products.productList || [],
});

const mapDispatchToProps = (dispatch) => {
   return {
      GetAllProducts: () => dispatch(GetAllProducts("products")),
   };
};

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

ProductsActions.js

import * as actions from "../actions/ActionTypes";
import axios from "axios";

export const GetAllProducts = (catagory) => {
   return (dispatch) => {
      dispatch({ type: actions.GET_PRODUCT_LIST_PENDING });

      axios
         .get(`http://localhost:5000/api/get/${catagory}`)
         .then((res) => {
            dispatch({
               type: actions.GET_PRODUCT_LIST_SUCCESS,
               payload: res.data,
            });
         })
         .catch((err) => {
            dispatch({
               type: actions.GET_PRODUCT_LIST_FAILURE,
               payload: err,
            });
         });
   };
};
reactjs redux react-redux react-router-dom
1个回答
0
投票

谢谢@El Aoutar Hamza,我已经这样输入了

旧代码:

import { Products } from "./Products";

新代码-已解析

import Products from "./Products";

通过除去花括号,问题已解决。

© www.soinside.com 2019 - 2024. All rights reserved.