Javascript 为什么componentdidmount调用了两次

我已在componentDidMount中使用React组件从服务器获取数据。问题是componentDidMount被调用了两次，API也被调用了两次。我有一个视图增量API，比如youtube视频视图，由于两次API调用，数据库中的视图增量为两次

class SingleVideoPlay extends React.Component {
    constructor(props) {
        super(props);
        this.player = React.createRef();
    }
    state = {
        autoPlay: true,
        relatedVideos: [],
        video: null,
        user: null,
        comments: [],
        commentInput: {
            value: '',
            touch: false,
            error: false
        },
        following: false,
        tab: 'comments'
    };
    _Mounted = false;

    componentDidMount() {
        this._Mounted = true;
        if (this._Mounted) {
            const videoId = this.props.match.params.id;
            this.getVideoDetails(videoId);
        }
    }
    componentWillUnmount() {
        this._Mounted = false;
        try {
            clearInterval(this.state.videoInterval);
            this.props.videoEditUrl('');
        } catch (error) {}
    }
    captureVideoTime = async () => {
        const { video } = this.state;
        const result = await updateWatchTime({
            id: video._id,
            time: 1
        });
        if (result.status === 200) {
            const updateVideo = {
                ...video,
                secondsWatched: video.secondsWatched + 1
            };
            this.setState({ video: updateVideo });
        }
    };
    videoEnded = () => {
        clearInterval(this.state.videoInterval);
    };
    videoPause = () => {
        clearInterval(this.state.videoInterval);
    };
    loadVideo = () => {
        clearInterval(this.state.videoInterval);
    };
    playingVideo = () => {
        const interval = setInterval(this.captureVideoTime, 1000);
        this.setState({ videoInterval: interval });
    };
    
    getVideoDetails = async (videoId) => {
        const video = await getVideo(videoId);

        if (video.status === 200) {
            let response = video.data;
            if (this.props.userId)
                if (response.user._id === this.props.userId._id)
                    this.props.videoEditUrl(`/video/edit/${response.media._id}`);
            this.setState({
                relatedVideos: response.videos.docs,
                video: response.media,
                user: response.user
            });
            this.checkIsFollowing();
            this.updateVideoStat(response.media._id);
        }
    };
    updateVideoStat = async (id) => videoView(id);
    checkIsFollowing = async () => {
        const { userId } = this.props;
        const { video } = this.state;
        if (userId && video) {
            const response = await isFollow({
                follower: userId._id,
                following: video._id
            });
            if (response) {
                this.setState({ following: response.following });
            }
        }
    };
    addOrRemoveFollowing = async () => {
        this.checkIsFollowing();
        const { following, video } = this.state;
        const { userId } = this.props;
        if (userId) {
            if (following) {
                const response = await removeFollow({
                    follower: userId._id,
                    following: video._id
                });
                this.setState({ following: false });
            } else {
                const response = await addFollow({
                    follower: userId._id,
                    following: video._id
                });
                this.setState({ following: true });
            }
        }
    };

    submitCommentHandler = async (event) => {
        const { userId } = this.props;
        event.preventDefault();
        if (userId) {
            const result = await saveComment({
                mediaId: this.state.video._id,
                parentId: '0',
                userID: userId._id,
                userName: userId.username,
                comment: this.state.commentInput.value
            });
            console.log(result);
            if (result.status === 200) {
                this.getVideoComments();
                this.setState({ commentInput: { value: '', touch: false, error: false } });
            }
        }
    };

    render() {
        const { autoPlay, relatedVideos, video, user, comments, commentInput, following, tab } = this.state;
        const { userId } = this.props;
        return (
            <div className="container-fluid">
        
            some coponents
            </div>
        );
    }
}

const mapStateToProps = (state) => ({
    userId: state.auth.user
});

export default connect(mapStateToProps, { videoEditUrl })(SingleVideoPlay);

class SingleVideoPlay扩展了React.Component{
建造师（道具）{
超级（道具）；
this.player=React.createRef（）；
}
状态={
自动播放：对，
相关视频：[]，
视频：空，
用户：null，
评论：[]，
评论输入：{
值：“”，
触摸：错，
错误：false
},
以下是：假，
选项卡：“评论”
};
_安装=错误；
componentDidMount（）{
这是真的；
如果（本安装）{
const videoId=this.props.match.params.id；
这个.getVideoDetails（videoId）；
}
}
组件将卸载（）{
这是错误的；
试一试{
clearInterval（this.state.videoInterval）；
this.props.videoEditUrl（“”）；
}捕获（错误）{}
}
captureVideoTime=async（）=>{
const{video}=this.state；
const result=await updateWatchTime({
id:video.\u id，
时间：1
});
如果（result.status==200）{
常数updateVideo={
视频
secondsWatched:video.secondsWatched+1
};
this.setState（{video:updateVideo}）；
}
};
视频结束=（）=>{
clearInterval（this.state.videoInterval）；
};
视频暂停=（）=>{
clearInterval（this.state.videoInterval）；
};
loadVideo=（）=>{
clearInterval（this.state.videoInterval）；
};
播放视频=（）=>{
const interval=setInterval（this.captureVideoTime，1000）；
this.setState（{videoInterval:interval}）；
};
getVideoDetails=async（videoId）=>{
const video=等待获取视频（videoId）；
如果（video.status==200）{
让响应=video.data；
if（this.props.userId）
if（response.user.\u id==this.props.userId.\u id）
this.props.videoEditUrl（`/video/edit/${response.media.\u id}`）；
这是我的国家({
相关视频：response.videos.docs，
视频：response.media，
用户：response.user
});
this.checkIsFollowing（）；
this.updateVideoStat（response.media.\u id）；
}
};
updateVideoStat=async（id）=>videoView（id）；
checkIsFollowing=async（）=>{
const{userId}=this.props；
const{video}=this.state；
if（用户标识和视频）{
const response=wait isFollow({
follower:userId.\u id，
以下：视频
});
如果（答复）{
this.setState（{following:response.following}）；
}
}
};
addOrRemoveFollowing=async（）=>{
this.checkIsFollowing（）；
const{following，video}=this.state；
const{userId}=this.props；
如果（用户ID）{
如果（以下）{
const response=等待移除跟随({
follower:userId.\u id，
以下：视频
});
this.setState（{following:false}）；
}否则{
const response=wait addFollow({
follower:userId.\u id，
以下：视频
});
this.setState（{following:true}）；
}
}
};
SubmitCommonHandler=异步（事件）=>{
const{userId}=this.props；
event.preventDefault（）；
如果（用户ID）{
const result=等待saveComment({
mediaId:this.state.video.\u id，
父ID:“0”，
userID:userID.\u id，
用户名：userId.userName，
注释：this.state.commentInput.value
});
控制台日志（结果）；
如果（result.status==200）{
这个.getVideoComments（）；
this.setState（{commentInput:{value:''，touch:false，error:false}）；
}
}
};
render（）{
const{autoPlay，relatedVideos，video，user，comments，commentInput，following，tab}=this.state；
const{userId}=this.props；
返回(
某些成分
);
}
}
常量mapStateToProps=（状态）=>({
userId:state.auth.user
});
导出默认连接（MapStateTops，{videoEditUrl}）（SingleVideoPlay）；

我不知道为什么componentDidMount打了两次电话，因为它显示了memmory lecage问题

---

如何修复。

我认为问题存在于使用SingleVideoPlay组件的父组件上。可能是父组件导致SingleVideoPlay组件多次渲染。 此外，您的代码中也存在一个问题

    componentDidMount() {
        this._Mounted = true;
        if (this._Mounted) {
            const videoId = this.props.match.params.id;
            this.getVideoDetails(videoId);
        }
    }

---

在这里，不需要检查是否安装了。因为它总是正确的。

我认为问题存在于使用SingleVideoPlay组件的父组件上。可能是父组件导致SingleVideoPlay组件多次渲染。 此外，您的代码中也存在一个问题

    componentDidMount() {
        this._Mounted = true;
        if (this._Mounted) {
            const videoId = this.props.match.params.id;
            this.getVideoDetails(videoId);
        }
    }

---

在这里，不需要检查是否安装了。_，因为它总是正确的。

我建议您将组件状态放在构造函数中，如下所示：

this.state={…}

我建议您将组件状态放在构造函数中，如下所示：

this.state={…}

为什么在第一个渲染组件后调用componentWillUnmount？这意味着父组件将卸载SingleVideoPlay组件并再次装载。我正在使用metronic主题，但我不能