javascript - 如何从 cloudinary React 小部件访问全局范围

Question

所以我在弄清楚如何从cloudinary react 小部件函数访问全局范围时遇到了麻烦，我想要的是设置响应状态。

功能

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

渲染

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

当前出现此错误:无法读取未定义的属性“setState”

Answer 1

提供给 openUploadWidget 的回调函数未绑定(bind)到 this，因此 this 不会是您所期望的内部内容。

你可以例如使用箭头函数来代替使用包含您想要的 this 值的封闭词法范围:

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