javascript - 错误 : Warning: setState(. ..):无法在现有状态转换期间更新(例如在 `render` 或另一个组件的构造函数内)

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 是一个异步函数所以我尝试将 await 放在 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)}

无论你从哪里得到这个值，你都需要作为参数传递给那个函数