React / Redux Предупреждение: setState (...): невозможно обновить во время существующего перехода состояния (например, в `render` или в конструкторе другого компонента) - PullRequest
0 голосов
/ 08 февраля 2019

Я довольно новичок в React / Redux, поэтому, пожалуйста, помогите.Я получаю вышеупомянутое предупреждение, и хотя я прочитал много похожих запросов, они обычно связаны с обновлением состояния в методе Render (), и я не вижу, как я это делаю.

Функция loadUserGetNextAndFindPerformanceAsyncв mapDispatchToProps обновляет состояние.

Я также получаю «warning.js: 36 Предупреждение: сбойный тип пропеллера: проверка также не является функцией» в этом контейнере.

ОБНОВЛЕНИЕ:Может ли быть так, что мои Действия и Редуктор физически находятся в пределах моего родительского компонента?Как мои редукторы / действия связываются с моим компонентом, кроме как из вызова?

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);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...