Реагировать на Redux Thunk с обратным вызовом другой функции - TypeError: Невозможно прочитать свойство then для неопределенного - PullRequest
Новая
       10

Реагировать на Redux Thunk с обратным вызовом другой функции - TypeError: Невозможно прочитать свойство then для неопределенного

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

Я использую реаги + редукс. У меня есть модальная форма с данными и изображениями, и в случае успеха мне нужно закрыть модальное окно, иначе ошибка, возвращаемая из-за избыточности. В функции отправки у меня есть еще 1 функция обратного вызова для сохранения изображений на S3. Я возвращаю обещание от избыточного толка, но продолжаю получать сообщение «TypeError: Невозможно прочитать свойство then» неопределенного ».

Компонент 

handleSubmit = e => {
        e.preventDefault();

        if(this.isFieldEmpty()){
            this.setState({ message: "All fields are mandatory with at least 1 pic" });
            return;
        } else {
            this.setState({ message: "" });
        }

        const data = {
            name: this.state.name,
            description : this.state.description,
            points : this.state.points,
            attributes : this.state.attributes,
            images : this.state.images,
            created_by: localStorage.getItem('id'),
        }
        this.props.createItem(data).then(() => {
            this.hideModal();
        })
    }

const mapDispatchToProps = dispatch => {
    return {
        createItem: data => {
            return dispatch(createItem(data))
        },
    };
};

Действие 

const saveItemImages = (images,successcb, failurecb) => {
    if(images.length > 0){
        const formData = new FormData();
        for(var x = 0; x<images.length; x++) {
            formData.append('image', images[x])
        }
        const token = localStorage.getItem('token');
        fetch(`${backendUrl}/upload/item-images/`, {
            method: "POST",
            headers: {
                'Authorization': `Bearer ${token}`
            },
            credentials: 'include',
            body: formData
        })
        .then(res => {
            if(res.status === 200){
                res.json().then(resData => {
                    successcb(resData.imagesUrl);
                });
            }else{
                res.json().then(resData => {
                    failurecb(resData.message);
                }) 
            }
        })
        .catch(err => {
            console.log(err);
        });
    } else {
        successcb([]);
    }
}

export const createItem = data =>  { return (dispatch) => {
    saveItemImages(data.images, imagesUrl => {
        data.images = imagesUrl;
        return fetch(`${backendUrl}/admin/createItem`, {
            method: 'POST',
            headers: {
                'Accept': 'application/json,  text/plain, */*',
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${data.token}`
                },
            credentials: 'include',
            body: JSON.stringify(data)
        })
        .then(res => {
            if(res.status === 200){
                res.json().then(resData => {
                    dispatch({
                        type: ADMIN_CREATE_ITEM_SUCCESS,
                        payload: resData
                    })
                    return true;
                });
            }else{
                console.log("Save failed");
                res.json().then(resData => {
                    dispatch({
                        type: ADMIN_CREATE_ITEM_FAILED,
                        payload: {
                            message: resData.message
                        }
                    })
                }) 
            }
        })
        .catch(err => {
            dispatch({
                type: ADMIN_CREATE_ITEM_FAILED,
                payload: {
                    message: `Internal Error -- ${err}`
                }
            })
        });

    }, failedMessage => {
        let payload = {responseMessage: failedMessage}
            dispatch({
                type: ADMIN_CREATE_ITEM_FAILED,
                payload: payload
            })
    });
};
};

Заранее благодарен за любую помощь

1 Ответ

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

Вы должны вернуть Promise, чтобы создать асинхронный поток c для такого действия: 

export const createItem = data => dispatch => new Promise((resolve, reject) => {

  // do something was a success
  resolve();

  // do something was a fail
  reject();

});
...