我创建了一个HOC来处理加载。它使用属性new_level决定显示什么。
当我直接从URL打开页面时，没有任何问题，并且一切正常（因为isLoading的属性默认设置为isLoading）。
问题是，当我单击链接（true）时，事情无法按预期进行，因为<Link ... />现在是isLoading，因为我要从其导航的页面将状态设置为此值。
所以，这就是HOC：
false并在组件下方：
import React from 'react';
export default function WithLoading(WrappedComponent, loadingDelegate) {
class LoadingComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true
};
this.loadingDelegate = loadingDelegate;
}
componentDidMount() {
loadingDelegate(this);
}
render() {
if (this.props.isLoading === true) {
return (
<div>Loading...</div>
);
} else {
return <WrappedComponent {...this.props} />;
}
}
}
return LoadingComponent;
}
我遇到的错误是import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { actionCreators } from './SurveysStore';
import WithLoading from '../LoadingHOC';
//edit/:id
class SurveyDetailRoutedComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
{this.props.survey.questions.length}
</div>
);
}
}
const SurveyDetailRoutedComponentWithLoading = WithLoading(SurveyDetailRoutedComponent, (_context) => _context.props.requestSurvey(parseInt(_context.props.match.params.id)));
export default connect(
state => state.surveysReducer,
dispatch => bindActionCreators(actionCreators, dispatch)
)(SurveyDetailRoutedComponentWithLoading);
为null，因为我尝试呈现尚未解析的属性。
仅当我通过以相同方式呈现的页面中包含的survey呈现此组件时，才会出现问题。
我尝试在路由上设置<Link>，但这对我不起作用：
isLoading=true商店本身非常简单，我想我的错误在于我如何处理redux，因为看起来路由操作未重置加载。
export default class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Layout>
<Route exact path='/' component={(props) => <Home {...props} />} />
<Route path='/survey/edit/:id' component={(props) => <SurveyDetailRoutedComponent {...props} isLoading={true} />} />
</Layout>
);
}
}