React Class Inheritance

Question

我在React JS中从以前的组件继承信息的组件有问题。在下面的例子中，我试图从道具中登录的用户获取信息。但是，当仪表板页面组装(ComponentDidMount)时，我无法加载此信息。

componente/BaseDashboard.js

import React from 'react'; import Header from
'../../components/Header';
import { connect } from 'react-redux'; import * as actions from
'../../store/actions'; import Footer from '../../components/Footer';
class BaseDashboard extends React.Component {
state = {
statusMenu: true
}
alertMenu() {
this.setState({ statusMenu: !this.state.statusMenu })
}
alertMenu = this.alertMenu.bind(this);
render() {

return (
<>
<div className="wrapper">
<Header handleLogout={this.props.handleLogout} userData={this.props} alertMenu={this.alertMenu} />
<div className="content-wrapper">
{this.props.children}
</div>

<Footer handleLogout={this.props.handleLogout} userData={this.props} alertMenu={this.alertMenu} />
</div>
</>
);
} }
export default connect(null, actions)(BaseDashboard);

componente/index.js

import React from 'react'; import BaseDashboard from
'./BaseDashboard'; import { connect } from 'react-redux'; import * as
actions from '../../store/actions';
const baseDashboard = Component => {
class ComponentBaseDashboard extends React.Component {

componentDidMount() {
const { authorized, getViewUser, history } = this.props;
getViewUser();
if (!authorized) {
return history.replace("/");
}
}
componentDidUpdate(nextProps) {
const { authorized, history } = this.props;
if (!nextProps.authorized || !authorized) {
return history.replace("/");
}
}
render() {
return (
<BaseDashboard>
<Component {...this.props} />
</BaseDashboard>
);
}
}
const mapStateToProps = state => ({
authorized: state.auth.authorized,
user: state.auth.user
});
return connect(mapStateToProps, actions)(ComponentBaseDashboard); }
export default baseDashboard;

在此方法中，消息"TypeError: Cannot read property of undefined"当我运行console.log for this.props.user时发生了什么页面/Dashboard.js

componentDidMount() {
const { user } = this.props;
console.log(this.props);
this.setState({ user: user })
}

我在我的路由中以这种方式调用的仪表盘页面

Answer 1

您说this.props在未知组件中未定义(您发布了2个但没有log this.props)。

这里是一个最小的例子，没有所有无关的代码，显示你的代码应该工作:

const { Provider, connect } = ReactRedux;
const { createStore, applyMiddleware, compose } = Redux;
const initialState = { value: 22 };
const reducer = (state, { type, payload }) => {
return state;
};
class BaseDashboard extends React.Component {
componentDidMount() {
console.log(
'base props no problem:',
Boolean(this.props)
);
}
render() {
return <div>hello world</div>;
}
}
const ConnectedBaseDashboard = connect()(BaseDashboard);
const baseDashboard = (Component) => {
class ComponentBaseDashboard extends React.Component {
componentDidMount() {
console.log('props no problem:', this.props);
}
render() {
return (
<BaseDashboard>
<Component {...this.props} />
</BaseDashboard>
);
}
}
const mapStateToProps = (state) => state;
return connect(
mapStateToProps,
{}
)(ComponentBaseDashboard);
};
//creating store with redux dev tools
const composeEnhancers =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducer,
initialState,
composeEnhancers(
applyMiddleware(
() => (next) => (action) => next(action)
)
)
);
const App = baseDashboard(ConnectedBaseDashboard);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>
<div id="root"></div>

也许你可以用上面的代码片段来说明你在问题中遇到的问题。