Реакция родителей на передачу реквизитов ребенку вызывает бесконечные циклы

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 , чтобы понять, почему было сделано это изменение.