我在 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 调用了两次,而且它显示了内存泄漏问题。
如何修复它。
在组件周围使用
componentDidMount
可能会导致多次 <React.StrictMode>
调用。删除后,双重调用就消失了。
这是旨在帮助检测意外副作用的行为。您可以在文档中阅读更多相关信息。它仅在开发环境中发生,而在生产环境中,即使使用
componentDidMount
,也仅调用一次 <React.StrictMode>
。
这是用 React 18.1.0 测试的
严格模式会运行您的组件两次以确保可重用性。 通过从 index.js 中删除 React strictMode 标签。这是可以解决的。 你可以在https://react.dev/reference/react/StrictMode
中找到react严格模式的所有行为来自:
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
致:
root.render(
<App />
);
我认为问题存在于使用 SingleVideoPlay 组件的父组件上。可能该父组件导致 SingleVideoPlay 组件渲染多次。 另外,您的代码存在问题。
componentDidMount() {
this._Mounted = true;
if (this._Mounted) {
const videoId = this.props.match.params.id;
this.getVideoDetails(videoId);
}
}
在这里,无需检查 this._Mounted 是否已安装,因为它始终为 true。
更改:index.js 来自
root.render(
致: root.render(
这对我有用
1.安装jQuery npm 我 jquery
从'jquery'导入$
在导出命令后创建函数或 jwuery 代码或放在文件末尾