React-Redux : 항목을 삭제해도 배열이 다시 렌더링되지 않습니다.

ID가 작동하는 백엔드로 전달하여 초대장을 삭제합니다. 그러나 내 감속기가 필터링 된 새 배열을 다시 렌더링하기 위해 제대로 작동하지 않습니다. 페이지를 새로 고침하면 삭제 된 초대장이 사라집니다. 내가 도대체 뭘 잘못하고있는 겁니까?React-Redux : 항목을 삭제해도 배열이 다시 렌더링되지 않습니다.

액션 :

export function deleteInvitation(id) { 
    const user = JSON.parse(localStorage.getItem('user')); 
    console.log('now deleting id ', id); 
    return function(dispatch) { 
     axios 
      .delete(`${ROOT_URL}/invitation/`, { 
       headers: { authorization: user.token }, 
       params: { id: id } 
      }) 
      .then(response => { 
       console.log(id); 
       dispatch({ 
        type: DELETE_INVITATION, 
        id 
       }); 
      }); 
    }; 
}

감속기 :

export default function(state = {}, action) { 
    switch (action.type) { 
     case INVITATION_SUCCESS: 
      return { ...state, invited: true, error: {} }; 
     case INVITATION_FAILURE: 
      return { ...state, invited: false, error: { invited: action.payload } }; 
     case FETCH_INVITATIONS: 
      return { ...state, invitations: action.payload }; 
     case DELETE_INVITATION: 
      return { 
       ...state, 
       invitations: state.invitations.filter(_id => _id !== action.id) 
      }; 
     default: 
      return state; 
    } 
}

출처

2017-11-06 Boris K

가능한 중복 (HTTPS를 : //stackoverflow.com/questions/34582678/is-this-the-correct-way-to-delete-an-item-using-redux) – mersocarlin

'state.invitations'의 구조는 무엇입니까? 필터 - 'state.invitations.filter (_id => _id! == action.id)'-'state.invitations.filter (invitation => invitation._id! == action.id)'처럼 보입니다. –

네, 완벽합니다. 나는 람다 함수를 망치고 있었다. 이것을 답변으로 추가하십시오. 동의하겠습니다. –

나는 invitations 배열의 구조에 대한 추측을 만들고있어 ... 감속기에서

, 필터 기능이 잘못되었습니다. 이 액션은 id 속성을 전달합니다.이 속성은 invitation 개체의 속성입니다. 그러나 필터 기능은 state.invitations에서 개체를 필터링하는 것이며 개체는 id입니다. 즉, 감속기는 다음과 같이 수행된다 : 필터 함수 (AN invitation에 action.id (다수)의 부등식을 검사하기 때문에 완전한 원의 배열을 반환

const action = {id: 0} 
 

 
const invitation = [{ 
 
    _id: 0, 
 
    name: 'Name 0', 
 
    location: 'Location 0' 
 
    }, 
 
    { 
 
    _id: 1, 
 
    name: 'Name 1', 
 
    location: 'Location 1' 
 
    }, 
 
    { 
 
    _id: 2, 
 
    name: 'Name 2', 
 
    location: 'Location 2' 
 
    } 
 
]; 
 

 
console.log(invitation.filter(_id => _id !== action.id));

객체). 기본적으로 : 필터 기능이 state.invitations에있는 모든 항목을 반환 할 수 있도록

{ 
    _id: 0, 
    name: 'Name 0',    !===  number 
    location: 'Location 0' 
}

은 어떤 num 및/또는 invitation 객체에 대해 true를 돌려줍니다.

이처럼 action.id에 대해 invitation._id을 확인,이 문제를 해결하려면 : [?이 REDUX을 사용하여 항목을 삭제하는 올바른 방법인가]

const action = {id: 0} 
 

 
const invitation = [{ 
 
    _id: 0, 
 
    name: 'Name 0', 
 
    location: 'Location 0' 
 
    }, 
 
    { 
 
    _id: 1, 
 
    name: 'Name 1', 
 
    location: 'Location 1' 
 
    }, 
 
    { 
 
    _id: 2, 
 
    name: 'Name 2', 
 
    location: 'Location 2' 
 
    } 
 
]; 
 

 
console.log(invitation.filter(invitation => invitation._id !== action.id));

의

출처

2017-11-06 10:03:43

React-Redux : 항목을 삭제해도 배열이 다시 렌더링되지 않습니다.

답변

관련 문제