React / Redux警告:setState(...):在现有状态转换期间(例如在`render`或另一个组件的构造函数中)无法更新

时间:2019-02-08 03:00:01

标签: javascript reactjs typescript react-redux recharts

我对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" />
                          &nbsp;{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);

0 个答案:

没有答案