在React Web上工作并使用react-redux,遇到错误(请参见下面的屏幕截图)。在构建应用程序时没有错误时,仅导航至该路径即可。似乎this.props
无法访问redux上下文。不知道缺少什么?
对于另一个组件列出所有用户,相同的实现也可以正常工作。
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,
});
});
};
};
谢谢@El Aoutar Hamza,我已经这样输入了
旧代码:
import { Products } from "./Products";
新代码-已解析
import Products from "./Products";
通过除去花括号,问题已解决。