Javascript 在下一个操作之前未解决Redux thunk+;则不是未定义的函数或分派
我一直在开发react/redux应用程序,在这个动作中我的头撞到了墙上 问题-我正在使用wzywyg编辑器更新文件。当我上传照片时,应用程序会在操作完成图像处理之前尝试插入图像。因此,导致图像url未定义。当我上传第二个图像时,会插入第一个图像,依此类推 很明显,在调用下一个操作之前,thunk没有解决 更多详细信息Javascript 在下一个操作之前未解决Redux thunk+;则不是未定义的函数或分派,javascript,reactjs,redux,summernote,redux-thunk,Javascript,Reactjs,Redux,Summernote,Redux Thunk,我一直在开发react/redux应用程序,在这个动作中我的头撞到了墙上 问题-我正在使用wzywyg编辑器更新文件。当我上传照片时,应用程序会在操作完成图像处理之前尝试插入图像。因此,导致图像url未定义。当我上传第二个图像时,会插入第一个图像,依此类推 很明显,在调用下一个操作之前,thunk没有解决 更多详细信息 我的应用程序中有一个文本编辑器(summernote react)。当用户上载图像时,onImageUpload触发并触发handleImageUpload 从那里,我通过ma
- 我的应用程序中有一个文本编辑器(summernote react)。当用户上载图像时,onImageUpload触发并触发handleImageUpload
- 从那里,我通过mapStatetoProps发送了一个动作,并对图像进行了上传处理
- 图像处理后,应返回编辑器,并将图像路径嵌入编辑器中进行预览
addUploadToDocument(...).then is not a function
Uncaught TypeError: Cannot read property 'then' of undefined
我可以证实以下几点:
-Redux thunk设置正确。它在我们的生产版本中工作并启动。
-正在从我的组件调用该操作。只是不确定调度是否正确。我可以成功上载映像,但在解决操作之前已启动回调
以下是我的操作代码:
// actions.js
// thunk
export function loadImage(document, file) {
return (dispatch, getState) => {
return dispatch(addUploadToDocument(document, file))
.then(() => {
console.log('Thunk is loaded.. chyeah.');
var uploads = this.props.uploads
var image = uploads[uploads.length - 1]
ReactSummernote.insertImage(image.previewURL, $image => {
$image.css("width", Math.floor($image.width() / 2));
$image.attr("alt", image.name);
});
});
}
}
//image processing action
export function addUploadToDocument(document, file) {
return (dispatch, getState) => {
//const position = getState().bodyEditorSelection.index
const base64Reader = new FileReader()
base64Reader.addEventListener('load', function() {
const base64 = base64Reader.result.replace(/data:.*?base64,/, '')
const key = Math.random().toString(36).substring(7)
const destination_path = `/uploads/${document.name}/${key}-${file.name}`
return dispatch({
type: DOCUMENT_ADD_UPLOAD,
payload: {
path: destination_path,
type: file.type,
base64: base64,
name: document.name,
previewURL: window.URL.createObjectURL(file),
//position: position
}
})
})
base64Reader.readAsDataURL(file)
}
}
这是我的组件
handleImageUpload (files, editor, welEditable) {
var file = files[files.length -1];
this.props.loadImage(this.props.document, file)
}
render() {
this.syncBodyEditorState()
this.state = this.state || {}
return (
<ReactSummernote
value={this.props.body}
options={{
height: 750,
dialogsInBody: true,
toolbar: [
["style", ["style"]],
["font", ["bold", "underline", "clear"]],
["fontname", ["fontname"]],
["para", ["ul", "ol", "paragraph"]],
["table", ["table"]],
["insert", ["link", "picture", "video"]],
["view", ["codeview"]]
]
}}
onImageUpload={this.handleImageUpload}
onChange={this.handleChange}
/>
)
}
}
function mapStateToProperties(state) {
const currentDocument = currentDocumentSelector(state).currentDocument
return {
document: currentDocument,
bodyEditorSelection: state.bodyEditorSelection,
body: currentDocument.content.body,
uploads: currentDocument.content.uploads
}
}
export default connect(mapStateToProperties, {
SummernoteEditor,
updateDocumentBody,
updateBodyEditorSelection,
addUploadToDocument,
loadImage
})(SummernoteEditor)
handleImageUpload(文件、编辑器、可编辑){
var file=files[files.length-1];
this.props.loadImage(this.props.document,文件)
}
render(){
this.syncBodyEditorState()
this.state=this.state | |{}
返回(
)
}
}
函数映射StateTroperty(状态){
const currentDocument=currentDocumentSelector(state).currentDocument
返回{
文件:currentDocument,
bodyEditorSelection:state.bodyEditorSelection,
正文:currentDocument.content.body,
上载:currentDocument.content.uploads
}
}
导出默认连接(MapStateToproperty{
《夏日笔记》编辑,
更新的文档体,
更新编辑选择,
添加上传到文档,
加载映像
})(夏日笔记编辑)
我错过了一些琐碎的事情吗?我看了几十个例子,thunk把我难住了
提前感谢您的帮助。现在您的
addUploadToDocument
函数没有返回承诺,尽管您。然后您的分派
方法(它只是返回一个普通对象的砰砰声)。如果您需要继续,您可以将addUploadToDocument
函数的内容包装在一个promise中,这样就可以了。这里有一个稍微不同的方法,使用一些折射来开始(假设“加载”事件只能发生一次):
export function loadImage(document, file) {
return (dispatch, getState) => {
const base64Reader = new FileReader();
const promise = new Promise((resolve, reject)=> {
base64Reader.addEventListener('load', resolve)
})
.then(()=> {
const base64 = base64Reader.result.replace(/data:.*?base64,/, '')
const key = Math.random().toString(36).substring(7)
const destination_path = `/uploads/${document.name}/${key}-${file.name}`
dispatch({
type: DOCUMENT_ADD_UPLOAD,
payload: {
path: destination_path,
type: file.type,
base64: base64,
name: document.name,
previewURL: window.URL.createObjectURL(file),
//position: position
}
})
})
.then(()=> {
console.log('Thunk is loaded.. chyeah.');
var uploads = this.props.uploads
var image = uploads[uploads.length - 1]
ReactSummernote.insertImage(image.previewURL, $image => {
$image.css("width", Math.floor($image.width() / 2));
$image.attr("alt", image.name);
});
})
base64Reader.readAsDataURL(file);
return promise;
}
}