Uncaught Invariant Violation：在调度之间检测到状态突变，

Question

我正在尝试仅显示从状态映射到容器组件道具的查询数组的一部分（使用 mapStateToProps）。

为此，我使用展开运算符 Array.slice，然后遍历子数组以创建组件。在我的应用程序上，我可以成功显示子数组并通过整个数组的段进行分页，但是每当我触发一个操作以随机播放或替换数组中的元素时，我总是在将适当的操作分派到我的减速器：

未捕获的不变违规：在调度之间检测到状态突变，>在路径 querys.0.submit_time._isValid 中。这可能会导致不正确的行为。

我只在第一次点击时收到此错误。如果我显示整个数组，也不会发生此错误。在这个数组中，每个元素（一个查询）都有一个 moment1 属性。上面的错误是在应用程序上未显示的第一个元素上引发的（在这种情况下，查询 0 被跳过。如果我显示查询 0-9，那么错误将针对查询 10）。由于 submit_time 应该被突变，我已经使用 moment.clone() 对其进行深度复制，但仍然出现错误。有人知道如何显示数组切片并避免此错误吗？

---

编辑：

这是我的组件、动作和减速器的简化代码。我的组件最初是从 redux 商店作为道具传递的查询。然后它将这个数组的一个切片向下传递给一个子组件，该子组件为每个元素创建一个 tr（通过迭代）。在应用程序上，您可以通过打开单选按钮来触发 onSortChange 事件处理程序。这会触发 SORT_QUERIES_BY_FIELD 操作，这会导致 queryReducer 使用 List.sort 对数组进行排序。当我第一次触发 onSortChange 操作时以及在 SORT_QUERIES_BY_FIELD 操作被调度之前发生错误：

组件：

    import React, {PropTypes} from 'react';
    import {connect} from 'react-redux';
    import {bindActionCreators} from 'redux';
    import moment from 'moment';
    import * as queryActions from '../../actions/queryActions';
    import QueryList from './QueryList';
    import RadioGroup from 'react-radio';

    class TroubleshootPage extends React.Component {
      constructor(props, context) {
        super(props, context);
        this.onSortChange = this.onSortChange.bind(this);
        this.state = {querys: [...this.props.querys]};
      }
      componentWillReceiveProps(nextProps) {
        this.setState({querys: nextProps.querys});
      }
      onSortChange(value, event) {
        this.props.actions.sortQueriesByField(value);
      }

      render() {
        const {querys, radioGroupValue} = this.state;
        let subList = [...querys].slice(0,9);
        return (
          <div>
           <RadioGroup name="sorts" defaultValue={null} onChange={this.onSortChange.bind(this)}>
             <input type="radio" value="total_elapsed_time" />Elapsed Time
           </RadioGroup>
            <QueryList selectedQuery={this.selectedQuery}
                       selectedQueryStep={this.selectedQueryStep}
                       querys={subList} />
          </div>
        );
      }
    }
    TroubleshootPage.propTypes = {
      querys: PropTypes.array.isRequired,
      actions: PropTypes.object.isRequired
    };
    function mapStateToProps(state, ownProps) {
      return {querys: state.querys};
    }
    function mapDispatchToProps(dispatch) {
      return {actions: bindActionCreators(queryActions, dispatch)};
    }
    export default connect(mapStateToProps, mapDispatchToProp)(TroubleshootPage);

行动：

    import * as types from './actionTypes';
    import queryApi from '../api/mockQueryApi';

    export function sortQueriesByField(field) {
      return { type: types.SORT_QUERIES_BY_FIELD, field};
    }

减速机：

    import * as types from '../actions/actionTypes';
    import initialState from './initialState';

    export default function queryReducer(state = initialState.querys, action) {
      switch(action.type) {
        case types.SORT_QUERIES_BY_FIELD:
          let {field} = action;
          var querys = [...state];
          querys.sort(function(a,b) {return a[field]-b[field]})
          return querys;

        default:
          return state;
      }
    }

Answer 1

我遇到了同样的问题，但当我在我的类之外创建一个变量并更新变量和状态时，我终于让它工作了。这是代码。它非常敏感，我知道这是一种反模式，但它确实有效！

import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import { Row, Col } from 'react-bootstrap';
import {bindActionCreators} from 'redux';
import DatePicker from 'react-datepicker';
import * as actions from '../actions/checkoutActions';
import moment from 'moment';

import 'react-datepicker/dist/react-datepicker.css';

let date = moment();

class AppointmentPage extends React.Component{
  constructor(props, context){
    super(props, context);
    this.createAppt = this.createAppt.bind(this);
    this.updateDate = this.updateDate.bind(this);
    this.updateTime = this.updateTime.bind(this);
    this.printTimeRange = this.printTimeRange.bind(this);
  }

  printTimeRange(appt){
    let active = "";
    if(this.props.apptTime === appt)
      active = "active";
    return (
      <li key={appt} className={"list-group-item appt-item "+active} id={"time_"+appt} onClick={this.updateTime}>
        {moment(appt+":00", ["H:mm"]).format("h:mm A")+' - '+moment((appt+1)+":00", ["H:mm"]).format("h:mm A")}
      </li>
    );
  }


  updateDate(apptDate){
    date = apptDate;
    return this.setState({apptDate});
  }

  updateTime(e){
    const id = Number(e.target.id.substring(5));
    this.props.actions.updateTime(id);
  }

  createAppt(e){
    e.preventDefault();
    this.props.actions.createAppt();
  }

  render(){
    return (
      <Row>
        <Col md={2}/>
        <Col md={8}>
          <h2>
            Schedule An Appointment
            <button className="btn btn-primary pull-right" onClick={this.createAppt}>Make Appointment</button>
          </h2><hr/>
          <Row>
            <Col md={6}>
              <DatePicker inline
                selected={date}
                onChange={this.updateDate} />
            </Col>
            <Col md={6}>
              <ul className="list-group">
                {this.props.appointments && this.props.appointments.map(this.printTimeRange)}
              </ul>
            </Col>
          </Row>
        </Col>
      </Row>
    );
  }
}

AppointmentPage.propTypes = {
  actions: PropTypes.object.isRequired,
  user: PropTypes.object.isRequired,
  appointments: PropTypes.array,
  apptTime: PropTypes.number
};

export default connect(
  (s)=>{return {
    user:s.user,
    appointments:s.checkout.appointments,
    apptTime: s.checkout.apptTime
  };},
  d=>{return {actions:bindActionCreators(actions,d)};}
)(AppointmentPage);

Answer 2

我之前也遇到过同样的问题，就我而言，这是由浅拷贝引起的。每次我返回一个新状态时，旧状态也会改变。

我使用了一种棘手的方法来让它工作，通过 JSON.parse(JSON.stringify(temp)) 创建一个深度克隆。

你也可以试试var querys = JSON.parse(JSON.stringify(state));。

希望它有效。