亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

為什么 componentdidmount 調用了兩次

為什么 componentdidmount 調用了兩次

30秒到達戰場 2023-01-06 09:26:03
我在componentDidMount中有 React Component從服務器獲取數據。問題是componentDidMount被調用了兩次,API 也被調用了兩次。由于兩次 API 調用,我有一個視圖增量 API,例如 youtube 視頻視圖在數據庫中增加了兩次。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 });    };我不知道為什么 componentDidMount 調用了兩次,因為它顯示內存占用問題。
查看完整描述

3 回答

?
大話西游666

TA貢獻1817條經驗 獲得超14個贊

多次componentDidMount調用可能是由于<React.StrictMode>在您的組件周圍使用而引起的。刪除它后,雙重調用就消失了。

這是旨在幫助檢測意外副作用的行為。您可以在文檔中閱讀更多相關信息。它只發生在開發環境中,而在生產環境中componentDidMount即使使用<React.StrictMode>.

這是用 React 18.1.0 測試的


查看完整回答
反對 回復 2023-01-06
?
月關寶盒

TA貢獻1772條經驗 獲得超5個贊

我認為問題存在于使用 SingleVideoPlay 組件的父組件上??赡苁悄莻€父組件導致 SingleVideoPlay 組件渲染了不止一次。另外,你的代碼有問題。


    componentDidMount() {

        this._Mounted = true;

        if (this._Mounted) {

            const videoId = this.props.match.params.id;

            this.getVideoDetails(videoId);

        }

    }

在這里,無需檢查 this._Mounted 是否已安裝,因為它始終為真。


查看完整回答
反對 回復 2023-01-06
?
湖上湖

TA貢獻2003條經驗 獲得超2個贊

1.通過npm i jquery安裝jQuery

  1. 從'jquery'導入$

  2. 在導出命令之后或放在文件末尾創建您的函數或 jwuery 代碼


查看完整回答
反對 回復 2023-01-06
  • 3 回答
  • 0 關注
  • 926 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號