web-dev-qa-db-ja.com

componentWillUpdateまたはcomponentDidUpdate？内でsetStateを繰り返し呼び出す

小道具として渡されるReactコンポーネントの背景画像の向きを理解しようとしています。

まず、Imageオブジェクトを作成し、そのsrcを新しいImageに設定します。

_  getImage() {
    const src = this.props.url;
    const image = new Image();
    image.src = src;

    this.setState({
      height: image.height,
      width: image.width
    });
  }
_

高さと幅で状態を更新した後、getOrientation()内でcomponentDidUpdate()を呼び出してみます。

_  getOrientation() {
    const { height, width } = this.state;
    if (height > width) {
      this.setState({ orientation: "portrait" });
    } else {
      this.setState({ orientation: "landscape" });
    }
  }
_

その後、次のエラーが発生します。

_Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate.
_

ここで何が起こっているのでしょうか？

サンドボックスへのリンク

javascriptreactjsimageorientationsetstate
6
A7DC

次のようにprevPropsを含める必要があります。

componentDidUpdate(prevProps, prevState) {
  ...
}

詳しくは こちら をご覧ください。

2
Colin