reactjs - 处理有关未安装组件的错误的最佳方法是什么?尝试实现 CKEditor 但收到此错误
问题描述
一旦我将我的 CKeditor 实现为反应模式,我会收到以下错误:
警告:无法对未安装的组件执行 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 实现上,但我不确定问题出在哪里,因为它是一个相当简单的组件。
解决方案
我可以通过将局部变量设置为 true 来消除未挂载的错误,我在效果的清理功能上将其设置为 false(如 react 所建议的那样)。然后我更新状态当且仅当该值为真时,即如果组件未安装意味着我们的变量设置为假,它不会进入 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]);
推荐阅读
- reactjs - 如何将 Formik 中的 isInitialValid 和 validateOnMount 迁移到 initialErrors?
- ios - 如何在 iOS 上更改年龄等级?
- powershell - Powershell - Group-Object 再次展开和分组
- r - 在 coefplot 中手动排序系数
- google-sheets - 如何计算第 1 列并在第 2 列返回当前行及以上行的特定 ID 号的结果?
- git - 来自列出的分支(主)的 git pull 不起作用,但可以与未列出的分支(主)一起使用
- firebase - Firebase 云消息推送通知显示 0% 打开和 0 点击
- python-3.x - python元组与特定数字比较
- java - JButton 不会改变 JPanel 上的大小或位置
- gdb - 使用 GDB 的几步指令