2017-10-30 12 views
1

나는 객체가 포함 된 state을 가지고 있습니다. 또한 object property을 기반으로 state에서 개체를 제거하는 삭제 API가 있습니다. 반응 lodash 작동하지 않음

deleteItem(item_to_delete){ 
    const del_item = _.find(this.state.bucket_list, bucklistitem => bucklistitem.name === item_to_delete); 
    fetch(url(this.props.api) + '/' + del_item._id, { 
     method: "DELETE", 
     headers: { 
      'Accept': 'application/json', 
      'Content-Type': 'application/json', 
     }, 
    }); 

    _.remove(this.state.bucket_list, bucketlistitem => bucketlistitem.name === item_to_delete); 
    this.setState({ bucket_list: this.state.bucket_list }); 
} 

그러나 나는 현재 나쁜되는 state이 같은 변경 가능한 치료하고 이해 : 여기에 코드입니다. 따라서 state 복사본을 만들어 복사본을 변경하고 내 setState 코드를 변경하고 싶습니다. 여기에 코드입니다 : 그러나

deleteItem(item_to_delete){ 
    let bucket_list_copy = Object.assign({}, this.state.bucket_list); //Copy of state 
    const del_item = _.find(bucket_list_copy, bucklistitem => bucklistitem.name === item_to_delete); 
    fetch(url(this.props.api) + '/' + del_item._id, { 
     method: "DELETE", 
     headers: { 
      'Accept': 'application/json', 
      'Content-Type': 'application/json', 
     }, 
    }); 

    _.remove(bucket_list_copy, { name: item_to_delete }); 
    this.setState({ bucket_list: bucket_list_copy }); 
} 

,이 데이터베이스에서 개체를 삭제하지만, 그것은 copied list에서 제거되지 않습니다. 어떤 아이디어?

+0

스플 라이스와 몇 단계를 건너 뛸 수 있을까? – iagowp

+0

나는 여기에서 무엇인가 잘못된 것을 보지 않는다. 1. React 라이프 사이클 내에서 deleteItem 메소드가 호출되는 곳은 어디입니까? 2. 코드를 실제로 디버깅하고 새 상태를 설정하기 전에 항목이 목록에서 제거되었는지 다시 확인 했습니까? – klugjo

답변

1

변경이

_.remove(bucket_list_copy, bucketlistitem => bucketlistitem.name === item_to_delete); 

이 라인

_.remove(bucket_list_copy, {name: item_to_delete}); 

당신이 Lodash documentation 보면, 두 번째 인수로 객체를 허용하지 않습니다 제거합니다.

0

당신은 왜에 두 번째 인수가 두 가지 버전의 서로 다른 제거됩니다

const delItemIndex = _.findIndex(this.state.bucket_list, bucklistitem => bucklistitem.name === item_to_delete); 
let newBucketList = this.state.bucket_list.splice(delItemIndex, 1); 

fetch(url(this.props.api) + '/' + this.state.bucket_list[delItemIndex]._id, { 
    method: "DELETE", 
    headers: { 
     'Accept': 'application/json', 
     'Content-Type': 'application/json', 
    }, 
}); 

this.setState({ bucket_list: newBucketList });