Фильтр массива Redux-Saga поддерживает состояние внутреннего компонента - PullRequest
Новая
       70

Фильтр массива Redux-Saga поддерживает состояние внутреннего компонента

0 голосов
/ 13 апреля 2020

Итак, у меня странное поведение в одном из моих компонентов, использующем состояние реакции, redux-saga.

Мой родительский компонент отображает список дочерних элементов, отображающих несколько карточек, с кнопкой удаления. Список получен из хранилища с избыточностью, которое заполняется с помощью redux-saga.

Из-за большой задержки (мне нужно сделать в бэкэнде, прежде чем получится успешный запрос на удаление), я хочу вместо этого отобразить счетчик кнопки удаления, когда я жду ответа.

Это хорошо работает, когда у меня есть только один элемент в моем списке, но как только у меня есть больше элемента (назначение списка), второй элемент получить состояние первого и начать вращение ...

В резюме:

1) Я запускаю запрос на удаление, изменяю состояние у дочерних элементов, счетчик запускается отлично. 2) элемент удаляется из списка и исчезает 3) но второй элемент списка принимает состояние старого удаленного элемента, и вращатель второго элемента списка начинает вращаться.

Что мне нужно является то, что когда я удаляю, например, первый пример моего массива, то, когда он удаляется, его состояние. 

// Parent component
// In my component, I get the props from redux-saga
Class parent_component {
    ...

    render(){
        const {myArray} = this.props;
        return ( 
             <div>
                {myArray.map((file, index) => {
                    <ChildrenComponent file={file} />
                })}
            </div>
           )
    } // render

}

// Children component
class children_component{
    state = {
      delete: false,
    }

    handleDelete = () => {
        const {file, dispatch} = this.props;
        this.setState({delete: true}, () =>{
            dispatch({type: 'DELETE_ACTION', payload: {filteToDelete: file}})
        });
    }

    render(){
       return (
           <div>
             {delete ? <Spinner/> : <Icon deleteIcon/>}
           </div>
       )
    }

}


// redux-saga / reducer 

function* DELETE_ACTION ({payload}){
    const {deletedFile, totalSize} = yield call(deleteApiCall, payload.file)
    const files = yield select(getFiles)
      yield put({
        type: 'FILE_DELETED',
        payload: {
          files: files.filter(doc => doc._id !== file._id),
          totalSize,
        },
      })
    })
}

Я пытался установить setState ({delete: false}) после первого setState в функции handleDelete, но он не работает, также попытался сделать это в componentWillunmount, но все равно не повезло.

Может быть, кто-нибудь может просветить меня.

Спасибо

...