在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState？

Question

我正在尝试找出作为道具传入的 React 组件中背景图像的方向。

我首先创建一个图像对象并将其 src 设置为新图像：

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

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

用高度和宽度更新状态后，我尝试在 componentDidUpdate():

中调用 getOrientation()

  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.

知道这里发生了什么吗？

Link to Sandbox

Answer 1

您需要像这样包含 prevProps：

componentDidUpdate(prevProps, prevState) {
  ...
}

有关更多信息，请参阅 here。

在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState？

Repeatedly calling setState inside componentWillUpdate or componentDidUpdate?

javascript

image

orientation

setstate

reactjs