Ошибка: Предупреждение: setState (...): невозможно обновить во время существующего перехода состояния (например, внутри `render` или конструктора другого компонента) - PullRequest
1 голос
/ 14 мая 2019

У меня есть компонент реагирования, который в основном представляет собой форму, которая представляет данные компании. Все хорошо, пока я не заполню форму, но когда я отправляю форму и она переходит на следующую страницу, она показывает следующую ошибку:

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, но это тоже не работает, вместо этого выдает некоторые другие ошибки. Любая помощь будет оценена. Спасибо!

1 Ответ

1 голос
/ 14 мая 2019
 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)}

откуда вы получаете это значение, вам нужно передать в качестве параметра эту функцию

...