javascript - 不确定如何修复未安装组件问题上的 React 状态更新

Question

我正在构建一个拼图应用程序，完成后将播放视频。

当我完成拼图时，一切都发生了变化并且工作正常，但我在控制台中收到以下错误，我不确定我需要做什么来修复它。

无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。修复，取消 componentWillUnmount 方法中的所有订阅和异步任务

抱歉，如果这是一个简单的问题，我是自学的，所以我知道我的知识有一些空白。有谁知道我该如何解决这个错误？

我真的很感激任何人都可以提供的任何帮助。

import React, { Component } from 'react'
import styled from 'styled-components';
import { DragDropContainer, DropTarget } from 'react-drag-drop-container';

import VideoMov from '../../videos/vid.mov'; 
import VideoWebm from '../../videos/vid2.webm';

import "./puzzle.css";

export class Game extends Component {

    state = {
        video: false,
    }

    PuzzleContainer = styled.div`
        display: flex;
        flex-direction: column;
        margin-top: 50px;
    `;
        
    PuzzleBoard = styled.div`
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    `;
    
    PuzzleBoardTop = styled.div`
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-bottom: 60px;        
    `;

    PuzzleBoardPieces = styled.div`
        height: 50vw; 
        max-height: ${ ({ height }) => height ? height + "px" : "210px" };
        width: ${ ({ width }) => width ? width + "px" : "85px" }; 
        border: 1px solid #fff;
        background-color: ${ ({ color }) => color ? '#' + color : "transparent" };
        margin-right: ${ ({ margin }) => margin ? "60px" : "0px" }
    `;

    PuzzleBoardBottom = styled.div`
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;    
    `;

    VideoWrapper = styled.div`
        width: 100%;
        height: 100%;
        margin-top: 50px;
        position: fixed;
        top: 0;
        left: 0;
        video {
            height: 100%;
            width: 100%;
        }
    `;
    
    PuzzleCounter = 0;

    dropped = e => {
        e.containerElem.style.visibility = 'hidden';
        e.target.classList.add('highlighted');
        this.PuzzleCounter++;

        if (this.PuzzleCounter === 3) {
            this.setState({
                video :  true,
            });
        }
    }

    PuzzleGame = (
            <this.PuzzleBoard>

                <this.PuzzleBoardTop>
                    <DropTarget 
                        targetKey="piece-7314" 
                        dropData={ 
                            { name : 'left' }
                        }
                        onHit={ this.dropped }
                    >
                        <this.PuzzleBoardPieces className="puzzle-board left" />
                    </DropTarget>
                    <DropTarget 
                        targetKey="piece-3167" 
                        dropData={ 
                            { name : 'middle' }
                        }
                        onHit={ this.dropped }
                    >
                        <this.PuzzleBoardPieces className="puzzle-board middle" height={ 150 } width={ 90 } />
                    </DropTarget>
                    <DropTarget 
                        className="drop-container drop-container-right"
                        targetKey="piece-5149" 
                        dropData={ 
                            { name : 'right' }
                        }
                        onHit={ this.dropped }
                    >
                        <this.PuzzleBoardPieces className="puzzle-board right" />
                    </DropTarget>
                </this.PuzzleBoardTop>

                <this.PuzzleBoardBottom>
                    <DragDropContainer targetKey="foo">
                        <this.PuzzleBoardPieces className="puzzle-piece left" color="09203f" height={ 210 } width={ 170 } margin={ true } />
                    </DragDropContainer>
                    <DragDropContainer targetKey="foo">
                        <this.PuzzleBoardPieces className="puzzle-piece middle" color="0a4ba6" height={ 210 } width={ 90 } margin={ true } />
                    </DragDropContainer>
                    <DragDropContainer 
                        targetKey="piece-7314"
                        dragData={
                            { label : 'left' }
                        }
                    >
                        <this.PuzzleBoardPieces className="puzzle-piece left" color="118ab6" margin={ true } />
                    </DragDropContainer>
                    <DragDropContainer targetKey="foo">
                        <this.PuzzleBoardPieces className="puzzle-piece right" color="173966" height={ 215 } width={ 70 } margin={ true } />
                    </DragDropContainer>
                    <DragDropContainer 
                        targetKey="piece-3167" 
                        dragData={
                            { label : 'middle' }
                        }
                    >
                        <this.PuzzleBoardPieces className="puzzle-piece middle" color="052651" height={ 150 } width={ 90 } margin={ true } />
                    </DragDropContainer>
                    <DragDropContainer 
                        targetKey="piece-5149" 
                        dragData={
                            { label : 'right' }
                        }
                    >
                        <this.PuzzleBoardPieces className="puzzle-piece right" color="092c65" margin={ false } />
                    </DragDropContainer>
                </this.PuzzleBoardBottom>

            </this.PuzzleBoard>
    );

    VideoContainer = (
        <this.VideoWrapper>
            <video autoPlay muted playsInline onEnded={ () => console.log('video ended') }>
                <source src={ VideoMov } type='video/mp4; codecs="hvc1"' />
                <source src={ VideoWebm } type="video/webm" />
            </video>
        </this.VideoWrapper>
    );

    render() {

        const { video } = this.state;
        return (
            <this.PuzzleContainer>
                { !video ? this.PuzzleGame : this.VideoContainer }
            </this.PuzzleContainer>
        );

    }
}

export default Game