如何从cloudinary react小部件访问全局范围

Question

So I am having a trouble at figuring it out on how to access global scope from cloudinary react widget function, what i want to is to set state on response.

Function

uploadWidget() {
  cloudinary.openUploadWidget({ cloud_name: 'descl4zie', upload_preset: 'g3d6k0nl', tags:['xmas']},
    function(error, result) {
      console.log(result);
      this.setState({photo: secure_url});
    });
 }

Render

render() {
  return (
    <button onClick={this.uploadWidget.bind(this)} className="upload-button">
      Add Image
    </button>
  )
}

Currently getting this error: Cannot read property 'setState' of undefined

Answer 1

The callback function given to openUploadWidget is not bound to this , so this will not be what you expect inside of it.

You could eg use an arrow function instead to use the enclosing lexical scope which has the this value you want:

uploadWidget() {
  cloudinary.openUploadWidget(
    { cloud_name: "descl4zie", upload_preset: "g3d6k0nl", tags: ["xmas"] },
    (error, result) => {
      console.log(result);
      this.setState({ photo: result });
    }
  );
}