处理有关未装载组件的错误的最佳方法是什么？尝试实现 CKEditor，但收到此错误

Question

一旦我将CKeditor实现为react Modal，就会出现以下错误：

警告：无法对已卸载的组件执行React状态更新。这是一个非操作，但它表明应用程序中存在内存泄漏。若要修复此问题，请取消useEffect中的所有订阅和异步任务清除功能。

CKeditor出现在第132行，这里是实现的代码：

import { Avatar } from "@material-ui/core";
import { MoreHorizOutlined, ShareOutlined } from "@material-ui/icons";
import ArrowUpwardOutlinedIcon from "@material-ui/icons/ArrowUpwardOutlined";
import ArrowDownwardOutlinedIcon from "@material-ui/icons/ArrowDownwardOutlined";
import RepeatOutlinedIcon from "@material-ui/icons/RepeatOutlined";
import ChatBubbleOutlineOutlinedIcon from "@material-ui/icons/ChatBubbleOutlineOutlined";
import React, { useEffect, useState } from "react";
import "../style/Post.css";
import Modal from "react-modal";
import { useDispatch, useSelector } from "react-redux";
import {
selectQuestionId,
selectQuestionName,
setQuestionInfo,
} from "../features/questionSlice";
import db from "../firebase";
import { selectUser } from "../features/userSlice";
import firebase from "firebase";
import ClassicEditor from "@ckeditor/ckeditor5-react";
import { CKEditor } from "@ckeditor/ckeditor5-build-classic";
Modal.setAppElement("#root");
function Post({ Id, question, imageUrl, timestamp, buildFaastUser }) {
const user = useSelector(selectUser);
const [openModal, setOpenModal] = useState(false);
const dispatch = useDispatch();
const questionId = useSelector(selectQuestionId);
const questionName = useSelector(selectQuestionName);
const [answer, setAnswer] = useState("");
const [getAnswer, setGetAnswer] = useState([]);
useEffect(() => {
if (questionId) {
db.collection("questions")
.doc(questionId)
.collection("answer")
.orderBy("timestamp", "desc")
.onSnapshot((snapshot) =>
setGetAnswer(
snapshot.docs.map((doc) => ({ id: doc.id, answers: doc.data() }))
)
);
}
}, [questionId]);
const handleAnswer = (e) => {
e.preventDefault();
if (questionId) {
db.collection("questions").doc(questionId).collection("answer").add({
questionId: questionId,
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
answer: answer,
user: user,
});
console.log(questionId, questionName);
setAnswer("");
setOpenModal(false);
}
};
return (
<div
className="post"
onClick={() =>
dispatch(
setQuestionInfo({
questionId: Id,
questionName: question,
})
)
}
>
<div className="post__info">
<Avatar src={buildFaastUser.photo} />
<h5>
{buildFaastUser.displayName
? buildFaastUser.displayName
: buildFaastUser.email}
</h5>
<small>{new Date(timestamp?.toDate()).toLocaleString()}</small>
</div>
<div className="post__body">
<div className="post__question">
<p>{question}</p>
<button
onClick={() => setOpenModal(true)}
className="post__btnAnswer"
>
Answer
</button>
<Modal
isOpen={openModal}
onRequestClose={() => setOpenModal(false)}
shouldCloseOnOverlayClick={false}
style={{
overlay: {
width: 680,
height: 550,
backgroundColor: "transparent",
boxShadow:
"box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);",
zIndex: "1000",
top: "50%",
left: "50%",
marginTop: "-250px",
marginLeft: "-350px",
},
}}
>
<div className="modal__question">
<h1>{question}</h1>
<p>
asked by{" "}
<span className="name">
{buildFaastUser.displayName
? buildFaastUser.displayName
: buildFaastUser.email}
</span>{" "}
{""}
on{" "}
<span className="name">
{new Date(timestamp?.toDate()).toLocaleString()}
</span>
</p>
</div>
<div className="modal__answer">
<CKEditor
required
editor={ClassicEditor}
data={answer}
onChange={(e, editor) => {
const data = editor.getData();
setAnswer(e.target.data);
}}
placeholder="Enter your answer"
type="text"
/>
</div>
<div className="modal__button">
<button className="cancel" onClick={() => setOpenModal(false)}>
Cancel
</button>
<button onClick={handleAnswer} type="submit" className="add">
Add Answer
</button>
</div>
</Modal>
</div>
<div className="post__answer">
{getAnswer.map(({ id, answers }) => (
<p key={id} style={{ position: "relative", paddingBottom: "5px" }}>
{Id === answers.questionId ? (
<span>
{answers.answer}
<br />
<span
style={{
position: "absolute",
color: "gray",
fontSize: "small",
display: "flex",
right: "0px",
}}
>
<span style={{ color: "lightblue" }}>
{answers.user.displayName
? answers.user.displayName
: answers.user.email}{" "}
on{" "}
{new Date(answers.timestamp?.toDate()).toLocaleString()}
</span>
</span>
</span>
) : (
""
)}
</p>
))}
</div>
<img src={imageUrl} alt="" />
</div>
<div className="post__footer">
<div className="post__footerAction">
<ArrowUpwardOutlinedIcon />
<ArrowDownwardOutlinedIcon />
</div>
<RepeatOutlinedIcon />
<ChatBubbleOutlineOutlinedIcon />
<div className="post__footerLeft">
<ShareOutlined />
<MoreHorizOutlined />
</div>
</div>
</div>
);
}
export default Post;

我是新手，所以在实现方面可能会错过一些基础知识。我当然知道CKeditor实现的问题，但我不确定问题是什么，因为它是一个相当简单的组件。

Answer 1

我通过将挂载的局部变量设置为true来消除未挂载的错误，我在效果的清理函数中将其设置为false(就像react建议的那样(。然后我更新状态，如果并且仅当该值为true，也就是说，如果组件未安装，意味着我们的变量设置为false，它不会进入if块。

这是代码：

useEffect(() => {
let mounted = true;
if (questionId) {
db.collection("questions")
.doc(questionId)
.collection("answer")
.orderBy("timestamp", "desc")
.onSnapshot((snapshot) => {
if (mounted) {
setGetAnswer(
snapshot.docs.map((doc) => ({ id: doc.id, answers: doc.data() }))
);
}
});
}
return () => (mounted = false);
}, [questionId]);