[REACTJS] 반응하고 돌아 오는 : catch되지 않은 오류, • 상태 돌연변이가 파견 사이에 발견 된

반응하고 돌아 오는 : catch되지 않은 오류, • 상태 돌연변이가 파견 사이에 발견 된

해결법

1. ---

   1.@DDS 올바른 방향으로 (감사합니다!) 저를 지적은 문제를 일으키는 돌연변이 다른 곳이었다 점에서.

   @DDS 올바른 방향으로 (감사합니다!) 저를 지적은 문제를 일으키는 돌연변이 다른 곳이었다 점에서.

   ManageUserPage는 DOM의 최상위 구성 요소이지만, 다른 경로의 다른 구성 요소는 렌더링 방법 상태를 돌연변이 된, UsersPage을했다.

   처음 렌더링 방법은 다음과 같이 보았다 :

   render() {
       const users = this.props.users.sort(alphaSort);
       return (
         <div>
           <h1>Users</h1>
           <input type="submit"
                  value="Add User"
                  className="btn btn-primary"
                  onClick={this.redirectToAddUserPage}/>
           <UserList
             users={users}/>
         </div>
       );
   }
   

   나는 다음에 사용자 할당을 변경하고 문제가 해결되었다 :

   const users = [...this.props.users].sort(alphaSort);
   

2. ---

   2.문제는이 구성 요소 또는 감속기에 있지 않습니다. 그것은 당신이 아마 사용자를 할당하고 부모 구성 요소, [IX] = savedUser의 어딘가에 아마, 그리고 사용자의 배열은 궁극적으로 국가에있는 것과 같은 배열입니다.

   문제는이 구성 요소 또는 감속기에 있지 않습니다. 그것은 당신이 아마 사용자를 할당하고 부모 구성 요소, [IX] = savedUser의 어딘가에 아마, 그리고 사용자의 배열은 궁극적으로 국가에있는 것과 같은 배열입니다.

3. ---

   3.REDUX 공식 문서에 제안 된 업데이트 패턴 중 하나를 수행하여 상태 변이의 문제를 해결

   REDUX 공식 문서에 제안 된 업데이트 패턴 중 하나를 수행하여 상태 변이의 문제를 해결

   내가 사용하는이 장면 뒤에 immer.produce 감속기에 createReducer을 사용하여 선호 :

   import { createReducer } from 'redux-starter-kit'
   
   const initialState = {
     first: {
       second: {
         id1: { fourth: 'a' },
         id2: { fourth: 'b' }
       }
     }
   }
   
   const reducer = createReducer(initialState, {
     UPDATE_ITEM: (state, action) => {
       state.first.second[action.someId].fourth = action.someValue
     }
   })
   

from https://stackoverflow.com/questions/41051302/react-and-redux-uncaught-error-a-state-mutation-was-detected-between-dispatche by cc-by-sa and MIT license