Uncaught Invariant Violation: A state mutation was detected between dispatches,

Question

I'm trying to display only a segment of an array of queries that I've mapped from state to the props of my container component (using mapStateToProps).

To do this, I use the spread operator, Array.slice, and then iterate over sub-array to create components. On my app, I can display the sub-array and page through segments of the full array successfully, but whenever I trigger an action to either shuffle or replace the elements in the array, I always get this error after dispatching the appropriate action to my reducers:

Uncaught Invariant Violation: A state mutation was detected between dispatches, >in the path querys.0.submit_time._isValid . This may cause incorrect behavior.

I only get this error on first click. This error also never occurs if I display the entire array. In this array, each element (a query) has a moment 1 attribute. The error above is thrown on the first element that's not displayed on the app (in this case query 0 was skipped. If I displayed queries 0-9, then the error would be for query 10). Since submit_time is supposedly being mutated, I've used moment.clone() to deep copy it, but still get error. Would anyone know how to display slice of array and avoid this error?

---

EDIT :

Here's simplified code of my component, action, and reducer. My component is initially passed querys from redux store as a prop. It then passes a slice of this array down to a child component that creates a tr for each element (through iteration). On the app, you can trigger the onSortChange event handler by toggling the radio button on. This triggers the SORT_QUERIES_BY_FIELD action, which causes queryReducer to sort array using List.sort. The error occurs when I trigger the onSortChange action for the first time and right before the SORT_QUERIES_BY_FIELD action is dispatched :

Component:

    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);

Action:

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

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

Reducer:

    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

I had the same problem but finally got it to work when I created a variable outside of my class and updated both the variable and the state. Here's the code. It was very touchy and I know this is an anti-pattern but it works!

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

I had the same problem before, In my case, that was caused by shallow copy. Every time I return a new state, the old state is changed as well.

I used a tricky way to get it work by doing JSON.parse(JSON.stringify(temp)) to create a deep clone.

you could try var querys = JSON.parse(JSON.stringify(state)); as well.

Hope it works.