javascript - React/Redux - TypeError:无法读取未定义的属性“道具”
问题描述
我是 React 的新手,我正在尝试使用 CoreUI 创建一个动态的 NavBar。现在我的操作中有一个静态数组,所以我可以看到它在导航栏上显示没有错误。但是一旦我运行它,我就会得到一个错误。我想做的是创建一个新的动态导航栏并将其插入我的静态栏
// 管理导航
import React, { Component } from "react";
import { getStoreType } from "../redux/actions/storeTypeActions";
import PropTypes from "prop-types";
import { connect } from "react-redux";
class AdminNav extends Component {
static propTypes = {
getStoreType: PropTypes.func.isRequired,
storeType: PropTypes.object.isRequired,
};
componentDidMount() {
this.props.getStoreType();
}
}
console.log("AdminNav", this.props);
const mapStateToProps = (state) => ({
storeType: state.storeType,
auth: state.auth,
});
export default connect(mapStateToProps, { getStoreType })(AdminNav);
//减速器
import { GET_STORETYPE, STORETYPE_LOADING } from "../actions/types";
const initialState = {
items: [
{
title: true,
name: "ADMINISTRATOR",
wrapper: {
// optional wrapper object
element: "", // required valid HTML5 element tag
attributes: {}, // optional valid JS object with JS API naming ex: { className: "my-class", style: { fontFamily: "Verdana" }, id: "my-id"}
},
class: "", // optional class names space delimited list for title item ex: "text-center"
},
],
loading: false,
};
export default function (state = initialState, action) {
switch (action.type) {
case GET_STORETYPE:
return {
...state,
loading: false,
};
case STORETYPE_LOADING: {
return {
...state,
loading: true,
};
}
default:
return state;
}
}
//DefaultLayout.js
import React, { Component, Suspense } from "react";
import { Redirect, Route, Switch } from "react-router-dom";
import * as router from "react-router-dom";
import { Container } from "reactstrap";
import {
AppAside,
AppFooter,
AppHeader,
AppSidebar,
AppSidebarFooter,
AppSidebarForm,
AppSidebarHeader,
AppSidebarMinimizer,
AppBreadcrumb2 as AppBreadcrumb,
AppSidebarNav2 as AppSidebarNav,
} from "@coreui/react";
// Sidebar nav config (Owner/Admin)
import admin_navigation from "../_nav-admin";
// Routes Config
import routes from "../../routes";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { logout } from "../../redux/actions/authActions";
const DefaultAside = React.lazy(() => import("./DefaultAside"));
const DefaultFooter = React.lazy(() => import("./DefaultFooter"));
const DefaultHeader = React.lazy(() => import("./DefaultHeader"));
const AdminHeader = React.lazy(() => import("./AdminHeader"));
class DefaultLayout extends Component {
constructor(props) {
super(props);
this.state = {
role: "",
path: "",
dashboard: [],
};
}
loading = () => (
<div className="animated fadeIn pt-1 text-center">Loading...</div>
);
static propTypes = {
isAuthenticated: PropTypes.bool,
auth: PropTypes.object.isRequired,
logout: PropTypes.func.isRequired,
};
render() {
const { isAuthenticated } = this.props.auth;
// If NOT Authenticated, redirect to login
if (!isAuthenticated) {
this.props.history.push("/login");
}
const role = this.props.auth.user.role;
return (
<div className="app">
<div className="app-body">
<AppSidebar fixed display="lg">
<AppSidebarHeader />
<AppSidebarForm />
<Suspense>
<AppSidebarNav
navConfig={admin_navigation}
{...this.props}
router={router}
/>
</Suspense>
<AppFooter>
<Suspense fallback={this.loading()}>
<DefaultFooter />
</Suspense>
</AppFooter>
</div>
);
}
}
const mapStateToProps = (state) => ({
auth: state.auth,
});
export default connect(mapStateToProps, { logout })(DefaultLayout);
解决方案
这是一个问题,您尝试访问this
不在类方法中。
console.log("AdminNav", this.props);
推荐阅读
- python - 从nodejs产生的python进程读取输出的问题
- php - 从WordPress中的最后一篇文章中获取第一张图片
- c - 计算C中一个句子中单词的出现次数
- c# - Microsoft Office interop Excel 中是否有任何选项隐藏保存对话框?
- javascript - 如何使用一些可选模块构建多包节点模块
- javascript - 如何在 Jquery 选择器中使用变量
- google-apps-script - 问:如何将 URL 域列表转换为完整 url
- google-cloud-platform - terraform 资源 google_compute_instance_group_named_port 始终重新创建
- highcharts - 如何将不同的背景颜色应用于 highcharts 中不同系列的整个工具提示
- c++ - 如何从c ++中的函数返回多个变量