通过Redux Thunk回调另一个函数— TypeError：无法读取未定义的属性'then'

Question

我正在使用react + redux。我有一个包含数据和图像的模态形式，成功后，我需要关闭模态，否则显示从redux返回的错误。在调度功能中，我还有1个回调函数可将图像存储到S3。我从redux-thunk返回诺言，但我不断收到“ TypeError：无法读取未定义的属性'then'”。

Component

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
            })
    });
};
};

预先感谢您的帮助

Answer 1

您应该返回Promise以为此类操作创建异步流：

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

  // do something was a success
  resolve();

  // do something was a fail
  reject();

});