Question

我要实现的目标：

我希望用户能够在画布上渲染的图片上放置红点。就是这样。

发生了什么事？

每次我添加所说的点（CanvasComponent）时，它就在那里，然后在第二秒后消失。我认为这是因为画布一遍又一遍地重新渲染。我在console.log上添加了componentWillReceiveProps，它在一分钟内达到k的最大值，并且崩溃了我的浏览器。

我看不到循环的来源，也许这里的人有更多技能或运气。

这是我的代码：

DisplayPictureComponent

setDimensions = (width, height) => {
    console.log('dimensions')
    this.setState({width: width, height: height})
};

render() {
    const {width, height} = this.state;
    return (
        <div>
            <CanvasComponent width={width} height={height} image={this.props.image}/>
            <ImageComponent
                setDimensions={this.setDimensions}
                image={this.props.image}/>
        </div>
    );
}

ImageComponent

componentWillReceiveProps(nextProps) {
    console.log('imageProps')
    const reader = new FileReader();
    reader.onload = async e => {
        await this.setState({image: e.target.result});
        const image = document.getElementById('image');
        const {naturalHeight, naturalWidth} = image;

        nextProps.setDimensions(naturalWidth, naturalHeight);
    };
    reader.readAsDataURL(nextProps.image);
}

render() {
    return (
        <div>
            <img style={{display: 'none'}} id={'image'} src={this.state.image} alt={''}/>
        </div>
    );
}

CanvasComponent

componentWillReceiveProps(nextProps) {
    console.log('canvasProps');
    // console.log('props');
    this.ctx = document.getElementById('canvas').getContext('2d');
    const img = new Image();
    img.onload = () => {
        this.ctx.drawImage(img, 0, 0, nextProps.width, nextProps.height);
    };
    img.src = URL.createObjectURL(nextProps.image)
}

handleClick = (e) => {
    const canvas = document.getElementById('canvas');
    this.Draw(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);
};

Draw = (x, y) => {
    console.log('drawing');
};

render() {
    return (
        <div>
            <canvas onClick={this.handleClick} width={this.props.width} height={this.props.height} id={'canvas'}/>
        </div>
    );
}

Answer 1

对componentWillReceiveProps的调用更改了道具，从而对其进行了调用。解决此问题的办法是比较当前的宽度和高度是否与下一个不同。

componentWillReceiveProps(nextProps) {
 console.log('imageProps')
 const reader = new FileReader();
 reader.onload = async e => {
    await this.setState({image: e.target.result});
    const image = document.getElementById('image');
    const {naturalHeight, naturalWidth} = image;
    if ((nextProps.width !== this.props.width) ||(nextProps.height !== this.props.height) ) {
    nextProps.setDimensions(naturalWidth, naturalHeight);
    }
};
    reader.readAsDataURL(nextProps.image);
}

componentWillReceiveProps已过时，您可以使用替代方法

static getDerivedStateFromProps(nextProps, prevState) {
  // Called after a component is instantiated or before it receives new props.
  // Return an object to update state in response to prop changes.
  // Return null to indicate no change to state.
}

您可以参考此RFC，以了解有关进行此更改的原因的更多信息。

反应将父级传递给孩子的道具导致无限循环

1 个答案: