Uncaught Invariant Violant: обнаружена мутация состояния между отправками,

Question

Я пытаюсь отобразить только сегмент массива запросов, которые я отобразил из состояния в подпорки моего компонента контейнера (используя mapStateToProps).

Для этого я использую оператор распространения Array.slice, а затем перебираю суб-массив для создания компонентов. В моем приложении я могу успешно отобразить подмассив и пролистывать сегменты полного массива, но всякий раз, когда я запускаю действие, чтобы либо перемешать, либо заменить элементы в массиве, я всегда получаю эту ошибку после отправки соответствующего действия моему редукторы:

Uncaught Invariant Violant: обнаружена мутация состояния между отправками, > в пути querys.0.submit_time._isValid, Это может вызвать неправильное поведение.

Я получаю эту ошибку только при первом нажатии. Эта ошибка также никогда не возникает, если я отображаю весь массив. В этом массиве каждый элемент (запрос) имеет атрибут момента 1. Вышеуказанная ошибка возникает в первом элементе, который не отображается в приложении (в этом случае запрос 0 был пропущен. Если бы я отображал запросы 0-9, то ошибка будет для запроса 10). Так как submit_time предположительно мутирует, я использовал moment.clone() для его глубокого копирования, но все равно получаю ошибку Кто-нибудь знает, как отобразить фрагмент массива и избежать этой ошибки?

---

РЕДАКТИРОВАТЬ:

Вот упрощенный код моего компонента, действия и редуктора. Мой компонент изначально передается по запросу из магазина приставок в качестве реквизита. Затем он передает часть этого массива дочернему компоненту, который создает 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

У меня была такая же проблема раньше, в моем случае это было вызвано мелким копированием. Каждый раз, когда я возвращаю новое состояние, старое состояние также изменяется.

Я использовал хитрый способ заставить его работать, делая JSON.parse(JSON.stringify(temp)) создать глубокий клон.

ты можешь попробовать var querys = JSON.parse(JSON.stringify(state));также.

Надеюсь, что это работает.

Answer 2

У меня была та же проблема, но, наконец, она заработала, когда я создал переменную вне моего класса и обновил как переменную, так и состояние. Вот код Это было очень обидно, и я знаю, что это анти-шаблон, но он работает!

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