Question

我正在使用React-image-crop选择图像的感兴趣区域，但是首先需要从道具中读取预设的裁剪尺寸，以便在打开图像时选择裁剪区域。我正在使用componentDidMount（）更新状态下的裁剪。但这不起作用，并且出现错误：Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

class Image extends Component<ImagePropsType, ImageStateType>{
  constructor(props: ImagePropsType) {
  super(props);
    this.state = {
      crop: { unit: 'px', y: 0, x: 0, width: 0, height: 0 },
      ...
    }
  }

  componentDidMount() {
    this.setState({
        crop: props.props.presetCrop  // { unit: 'px', y: 10, x: 30, width: 50, height: 90 }
    })
  }
  
  updateCrop = (crop: { unit: string, x: number, y: number, width: number, height: number }) => {
    this.setState({ crop: crop })
  }
  ...
  render() {
    return (
       <ReactCrop src={this.state.imageURL} crop={this.state.crop} onChange={(newCrop) => this.updateCrop(newCrop)} keepSelection />
    )
  }

}

我也尝试使用getDerivedStateFromProps更新状态下的农作物，但是却遇到了同样的错误。我在哪里做错了？谢谢！

Answer 1

您的Image组件运行正常，没有任何错误： see it live （如您在日志中所看到的，更新的数量是有限的。因此它没有您提到的问题。）

所以问题可能出在它的父组件上，或者具有redux配置，或者在另一个地方。

已超过最大更新深度。

在每个更新上设置状态时，会发生这种情况。例如使用此处理程序：onChange={this.updateCrop(newCrop)}而不是：onChange={newCrop => this.updateCrop(newCrop)}

（第一个在每个渲染上调用onChange，并且onChange将导致一个新的渲染，因此它将成为无限循环。）

Answer 2

在您致电this.state.updateCrop的onChange上，您应该致电this.updateCrop：

<ReactCrop src={this.state.imageURL} crop={this.state.crop} onChange={this.updateCrop} keepSelection />

最大更新深度超出错误，React-image-crop

2 个答案: