javascript - 无法在其他函数中访问 this.state

Question

class Uploader extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
          data: '',
          name:'',
          loading: false
        }
    }
}

这是我在 this.state.load 中加载值的函数

 onChange(e) {
    let files = e.target.files;
    let reader = new FileReader();
    reader.readAsDataURL(files[0]);
    this.state.name = files[0].name;

    reader.onload = ((e) => {
        console.log("file is",e.target.result);
        const formData = {data: e.target.result};
        this.state.data = formData;
        this.setState({data: this.state.data});
        console.log(this.state.data); // here it gives value whats inside file
    });
    this.setState({'name': this.state.name});
    console.log(this.state.data)  // here it doesn't print anything
}

在任何函数中调用它:

onUpload() {
    console.log(this.state.data);
}

它不渲染。它给出:“错误状态未定义”。我如何在其他函数或其他代码范围中使用 this.state.data，任何其他方式调用此值或需要此更正？？？

Answer 1

创建一个函数(箭头函数除外)会创建它自己的 this 实例。所以你的函数内部没有状态对象。要解决这个问题，你有两种方法 -

使用箭头函数 -

使用箭头函数不会创建它自己的 this 实例

 onUpload = () => {
    console.log(this.state.data) 
}

将函数的 this 绑定(bind)到类的 this

constructor (props) {
  super(props)
  this.onChange = this.onChange.bind(this);
  this.onUpload = this.onUpload.bind(this);
}

希望这对您有帮助。 :)