我对React / Redux还是很陌生,所以请帮忙。我收到上述警告,尽管我已经阅读了许多类似的查询,但它们通常与Render()方法中的状态更新有关,但我看不到我在做什么。
mapDispatchToProps中的loadUserGetNextAndFindPerformanceAsync函数不会更新状态。
我也在此容器上也收到“ warning.js:36警告:道具类型失败:检查器不是函数”。
更新:难道是我的Actions和Reducer实际上在父组件的内部?除调用外,我的reducer / action如何与我的组件关联?
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import type appContainerStateType from '../../models/IAppContainer';
import appContainerPropTypes from '../../models/AppContainerPropTypes';
import userInfoActions from '../UserInfo/Actions';
import UserInfoPropTypes from '../UserInfo/PropTypes';
import type IUserInfo from '../UserInfo/IUserInfo';
import StackedBarChartOverTime from '../../components/StackedBarChartOverTime';
import SpinImage from '../../img/loading.svg';
import Loader from 'react-loader-advanced';
import Measure from 'react-measure';
type Props = {
appcontainer: appContainerStateType,
userInfo: IUserInfo,
loadUserGetNextAndFindPerformanceAsync: Function
};
class UserPerformance extends React.Component<void, Props, void> {
static propTypes = {
appcontainer: React.PropTypes.shape(appContainerPropTypes),
userInfo: React.PropTypes.shape(UserInfoPropTypes).isRequired,
loadUserGetNextAndFindPerformanceAsync: React.PropTypes.func.isRequired
};
componentDidMount() {
this.props.loadUserGetNextAndFindPerformanceAsync();
}
render() {
let data = this.props.userInfo.userActionDayProcess.data;
let ready = this.props.userInfo.userActionDayProcess.ready;
let title = "Dave's New Graph";
let colours = this.props.appcontainer.colours;
let fields = fields = ['CurrTotal', 'PrevTotal'];
let headerDimensions = { height: 0, width: 0 };
const spinner = (<span><img src={SpinImage} /></span>);
const content = (data !== undefined && data.length !== 0)
? (
<StackedBarChartOverTime
xAxis={'ProcessName'}
yAxisLabel={'Cases'}
xAxisLabel={'Process'}
fields={fields}
colours={colours} data={data}
/>
)
: (
<div>No Data!</div>
);
const loader = (dimensions: { height: number, width: number }) => {
console.log(`measure(${JSON.stringify(title)}) - loader: ${JSON.stringify(dimensions)}`);
return (
<Loader style={{ height: `${dimensions.height}px`, width: `${dimensions.width}px` }} show={!ready} message={spinner} hideContentOnLoad>
{content}
</Loader>
);
};
return (
<div className="container-fluid">
<div className="row">
<Measure>
{outerDimensions => {
console.log(`measure(${JSON.stringify(title)}) - outerDimensions: ${JSON.stringify(outerDimensions)}`);
return (
<div className="col-xs-12" style={{ position: 'relative', height: '230px' }}>
<Measure>
{innerDimensions => {
headerDimensions = innerDimensions;
console.log(`measure(${JSON.stringify(title)}) - headerDimensions: ${JSON.stringify(headerDimensions)}`);
return (
<h3>
<span className="glyphicon glyphicon-stats omni-skyblue omni-left" />
{title}
</h3>
);
}}
</Measure>
<div>
<Measure>
{dimensions => {
return loader({ height: outerDimensions.height - headerDimensions.height - 30, width: outerDimensions.width - 30 });
}}
</Measure>
</div>
</div>);
}}
</Measure>
</div>
</div>
);
}
}
const mapStateToProps = (state: object) => {
return {
appcontainer: state.appcontainer,
userInfo: state.userinfo
};
};
const mapDispatchToProps = (dispatch: Function) => {
return bindActionCreators({
loadUserGetNextAndFindPerformanceAsync: userInfoActions.loadUserGetNextAndFindPerformanceAsync
}, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(UserPerformance);