web-dev-qa-db-fra.com

Appel répété de setState dans componentWillUpdate ou componentDidUpdate?

J'essaie de comprendre l'orientation des images d'arrière-plan dans un composant React qui est passé en tant qu'accessoire).

Je commence par créer un objet Image et définir son src sur la nouvelle Image:

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

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

Après avoir mis à jour l'état avec les hauteurs et les largeurs, j'essaie d'appeler getOrientation() à l'intérieur de componentDidUpdate():

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

J'obtiens alors l'erreur suivante:

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

Des idées ce qui se passe ici?

Lien vers Sandbox

javascriptreactjsimageorientationsetstate
6
A7DC

Vous devez inclure prevProps comme ceci:

componentDidUpdate(prevProps, prevState) {
  ...
}

Pour plus d'informations, voir ici .

2
Colin