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

Question

我正在使用 React-image-crop 对图像的 select 感兴趣区域进行裁剪，但我需要先从 props 读取预设的裁剪尺寸，以便裁剪区域为 selected 当图像打开时。我正在使用 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

onChange 你正在调用 this.state.updateCrop 你应该调用 this.updateCrop:

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

Answer 2

您的 Image 组件工作正常，没有任何错误： see it live （正如您在日志中看到的那样，更新次数有限。因此它不存在您提到的问题。）

所以问题可能出在它的父组件上，或者redux配置上，或者其他地方。

Maximum update depth exceeded.

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

（第一个在每次render时调用onChange，onChange会引发新的render，所以会变成死循环。）

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

Maximum update depth exceeded error, React-image-crop

reactjs

react-image-crop