为什么组件没有挂载调用两次

Question

我在 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);

我不知道为什么 componentDidMount 调用了两次，而且它显示了内存泄漏问题。

如何修复它。

Answer 1

在组件周围使用

componentDidMount

可能会导致多次

<React.StrictMode>

调用。删除后，双重调用就消失了。

这是旨在帮助检测意外副作用的行为。您可以在文档中阅读更多相关信息。它仅在开发环境中发生，而在生产环境中，即使使用

componentDidMount

，也仅调用一次

<React.StrictMode>

。

这是用 React 18.1.0 测试的

Answer 2

严格模式会运行您的组件两次以确保可重用性。 通过从 index.js 中删除 React strictMode 标签。这是可以解决的。 你可以在https://react.dev/reference/react/StrictMode

中找到react严格模式的所有行为

来自：

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

致：

root.render(
  <App />
);

Answer 3

我认为问题存在于使用 SingleVideoPlay 组件的父组件上。可能该父组件导致 SingleVideoPlay 组件渲染多次。 另外，您的代码存在问题。

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

在这里，无需检查 this._Mounted 是否已安装，因为它始终为 true。

Answer 4

更改：index.js 来自

root.render( );

致： root.render( );

这对我有用

Answer 5

1.安装jQuery npm 我 jquery

2. 从'jquery'导入$

3. 在导出命令后创建函数或 jwuery 代码或放在文件末尾