Question

    fileChangedHandler = event => {
    event.preventDefault();
    event.persist();
    new ImageCompressor(event.target.files[0], {
    quality: .6,
    success(result) {
      this.setState({selectedFile: result})
    },
    error(e) {
      console.log(e.message);
    },
  });
  }

上面是函数，我想在成功后更改状态，但是我得到setState is not a function

这就是我触发它的方式：

<input style={{display: 'none'}} type="file" onChange={this.fileChangedHandler} ref={fileInput => this.fileInput = fileInput}/>
<button type='button' onClick={() => this.fileInput.click()} className='col m3 btn' style={{textTransform: 'none'}}>Choose image</button>

Answer 1

success是常规函数，具有动态this上下文，该上下文由调用者（ImageCompressor）确定。

由于fileChangedHandler方法是箭头，因此this指的是具有setState方法的组件类实例。

要在this内到达词法success，它应该是一个箭头：

...
success: (result) => {
  this.setState({selectedFile: result})
},
...

React setState不是函数

1 个答案: