Reactjs 试图设置状态时出现未定义的错误

我正在尝试上载图像，然后为每个上载的图像设置状态

但是，我在点击“上传”按钮时不断出现此错误：

catch:TypeError:无法读取未定义的属性“setState”

此代码块中出现错误：

        .then(function (response) {
            //handle success
            console.log('then: ', response);
            this.setState({
                file: e.target.files[0]
            });
        })

任何帮助都将不胜感激！ 谢谢

以下是整个组件：

import React, { Component } from 'react';
import axios from 'axios';

class ImageUpload extends Component {

constructor(props) {
    super(props);
    this.state = { file: '', imagePreviewUrl: '' };
}

_handleSubmit(e) {
    e.preventDefault();
    let fd = new FormData();
    fd.append('image', this.state.file);
    const config = {
        headers: { 'content-type': 'multipart/form-data' }
    }
    const postData = {
        method: 'POST',
        credentials: 'include',
        body: fd
    }

    axios({
        method: 'post',
        url: `/api/gaming/profiles/${this.props.profileId}/files/upload`,
        data: postData
    })
        .then(function (response) {
            //handle success
            console.log('then: ', response);
            this.setState({
                file: event.target.files[0]
            });
        })
        .catch(function (response) {
            //handle error
            console.log('catch: ', response);
        });
}



_handleImageChange(e) {
    e.preventDefault();

    let reader = new FileReader();
    let file = e.target.files[0];

    reader.onloadend = () => {
        this.setState({
            file: file,
            imagePreviewUrl: reader.result
        });
    }

    reader.readAsDataURL(file)
}

render() {
    const { questionId } = this.props;


    let { imagePreviewUrl } = this.state;
    let $imagePreview = null;
    if (imagePreviewUrl) {
        $imagePreview = (<img src={imagePreviewUrl} />);
    } else {
        $imagePreview = (<div className="previewText">Please select an Image for Preview</div>);
    }
    console.log('ImageUpload Render()');
    return (
        <div className="previewComponent">
                <input className="fileInput"
                    type="file"
                    onChange={(e) => this._handleImageChange(e)} />
                <button className="submitButton"
                    type="submit"
                    onClick={(e) => this._handleSubmit(e)}>Upload Image</button>
            <div className="imgPreview">
                {$imagePreview}
            </div>
        </div>
    );
}
}
export default ImageUpload;

import React，{Component}来自'React'；
从“axios”导入axios；
类ImageUpload扩展组件{
建造师（道具）{
超级（道具）；
this.state={file:''，imagePreviewUrl:''}；
}
_handleSubmit（e）{
e、 预防默认值（）；
设fd=newformdata（）；
fd.append（'image'，this.state.file）；
常量配置={
标题：{“内容类型”：“多部分/表单数据”}
}
常量postData={
方法：“POST”，
凭据：“包括”，
正文：fd
}
axios({
方法：“post”，
url:`/api/gaming/profiles/${this.props.profileId}/files/upload`，
数据：postData
})
.然后（功能（响应）{
//成功
log（'then:'，response）；
这是我的国家({
文件：event.target.files[0]
});
})
.catch（函数（响应）{
//处理错误
log（'catch:'，response）；
});
}
_handleImageChange（e）{
e、 预防默认值（）；
let reader=new FileReader（）；
让file=e.target.files[0]；
reader.onloadend=（）=>{
这是我的国家({
档案：档案，
imagePreviewUrl:reader.result
});
}
reader.readAsDataURL（文件）
}
render（）{
const{questionId}=this.props；
设{imagePreviewUrl}=this.state；
让$imagePreview=null；
如果（imagePreviewUrl）{
$imagePreview=（）；
}否则{
$imagePreview=（请选择要预览的图像）；
}
log（'ImageUpload Render（）'）；
返回(
这个。_handleImageChange（e）}/>
这个。_handleSubmit（e）}>上传图像
{$imagePreview}
);
}
}
导出默认图像上传；

在您的

\u handleSubmit（e）

定义

var self=this

然后使用

self.setState

而不是

this.setState

_handleSubmit(e) {
    e.preventDefault();
    let fd = new FormData();
    fd.append('image', this.state.file);
    const config = {
        headers: { 'content-type': 'multipart/form-data' }
    }
    const postData = {
        method: 'POST',
        credentials: 'include',
        body: fd
    }

    var self = this

    axios({
        method: 'post',
        url: `/api/gaming/profiles/${this.props.profileId}/files/upload`,
        data: postData
    })
    .then(function (response) {
        //handle success
        console.log('then: ', response);
        self.setState({
            file: event.target.files[0]
        });
    })
    .catch(function (response) {
        //handle error
        console.log('catch: ', response);
    });
}

---

在您的

\u handleSubmit（e）

define

var self=this

然后使用

self.setState

而不是

this.setState

_handleSubmit(e) {
    e.preventDefault();
    let fd = new FormData();
    fd.append('image', this.state.file);
    const config = {
        headers: { 'content-type': 'multipart/form-data' }
    }
    const postData = {
        method: 'POST',
        credentials: 'include',
        body: fd
    }

    var self = this

    axios({
        method: 'post',
        url: `/api/gaming/profiles/${this.props.profileId}/files/upload`,
        data: postData
    })
    .then(function (response) {
        //handle success
        console.log('then: ', response);
        self.setState({
            file: event.target.files[0]
        });
    })
    .catch(function (response) {
        //handle error
        console.log('catch: ', response);
    });
}

---

将您的Promise解析器更改为arrow函数，它将在词汇上为您定义

这个

将其更改为：

.then((response) => {
            //handle success
            console.log('then: ', response);
            this.setState({
                file: e.target.files[0]
            });
        })

将您的Promise解析器更改为arrow函数，它将在词汇上为您定义
这个

将其更改为：

.then((response) => {
            //handle success
            console.log('then: ', response);
            this.setState({
                file: e.target.files[0]
            });
        })