Question

我有一个react组件，它基本上是一种提交公司数据的表格。在填写表单之前，一切正常，但是当我提交表单并转到下一页时，它显示以下错误：

Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern but can be moved to `componentWillMount`.

我试图在其他问题和GitHub中寻找答案，但无济于事。我对该组件的整个代码在这里：

https://gist.github.com/BikalNepal/b0185dee1528e396ff3a91a4f0caf9bd

我知道这可能是因为setState是异步函数因此我尝试将等待放在setStates前面，但这也不起作用，而是引发了一些其他错误。任何帮助，将不胜感激。谢谢！

Answer 1

 this.handleImageLoaded = this.handleImageLoaded.bind(this);
 this.handleOnCropComplete = this.handleOnCropComplete.bind(this);
 this.handleOnCropChange = this.handleOnCropChange.bind(this);

此函数调用错误，您必须在要触发的参数中传递参数

    handleOnCropChange(crop) {
     this.setState({ crop });
    }

              <div>
                <ReactCrop
                  src={
                    this.state.companyImage === null
                      ? ""
                      : this.state.companyImage
                  }
                  crop={this.state.crop}
                  onImageLoaded={this.handleImageLoaded}
                  onComplete={this.handleOnCropComplete}
                  onChange={() => this.handleOnCropChange(this.state.crop)}
                  keepSelection={true}
                />
              </div>

例如这样并检查其他功能

 handleOnCropComplete(crop, pixelCrop) {
   const companyImage = this.state;
   this.makeClientCrop(crop, pixelCrop);
  }
 onComplete={() =>this.handleOnCropComplete(crop,pixelCrop)}

无论从何处获得此值，都需要将参数作为参数传递给该函数

错误：警告：setState（...）：在现有状态转换过程中（例如在`render`或另一个组件的构造函数中）无法更新

1 个答案: