javascript - 即使组件已卸载,状态也保持不变
问题描述
我正在使用 React 和 Draftjs 编写笔记编辑器。我现在遇到的问题是,即使组件被卸载,状态也不会改变,并且在下一次渲染时保持不变。
import React, {useState, useRef, useEffect} from 'react';
import {connect} from "react-redux";
import Proptype from "prop-types";
import Editor from 'draft-js-plugins-editor';
import {EditorState, ContentState} from "draft-js";
import CreateInlineToolbarPlugin from "draft-js-inline-toolbar-plugin";
import CustomInlineToolbar from "./CustomInlineToolbar";
import {updateTitle} from "../redux/action"
import "./NoteDetail.scss";
import 'draft-js-inline-toolbar-plugin/lib/plugin.css';
//TODOS: auto save function (need server)
const InlineToolbarPlugin = CreateInlineToolbarPlugin();
const {InlineToolbar} = InlineToolbarPlugin;
const NoteDetail = ({selectedNote, updateTitle}) => {
let {tags, note, _id, title} = selectedNote;
let [titleState, setTitleState] = useState(title);
let initContentState = ContentState.createFromText(note);
let [editorState, setEditorState] = useState(EditorState.createWithContent(initContentState));
let editorRef = useRef(React.createRef());
const onContentChange = (state) => {
setEditorState(state);
}
const focus = () => {
editorRef.current.focus()
}
const synTitle = (state) => {
updateTitle(state)
}
useEffect(()=>{
synTitle(_id, titleState)
}, [titleState, synTitle, _id])
useEffect(()=>{
console.log(titleState, title)
console.log(editorState.getCurrentContent().getPlainText())
},[title, editorState, titleState])
return(
<div>
<div className="NoteDetail-container">
<input type="text" id="title"
value={titleState === "Untitled Page"? "":titleState}
onChange={(e)=>setTitleState(e.target.value)}
/>
{/* <div id="tags">{renderTags(tags)}</div> */}
<div id="content" onClick={focus}>
<Editor
plugins={[InlineToolbarPlugin]}
onChange={onContentChange}
editorState={editorState}
ref={ele => editorRef.current = ele}
/>
<CustomInlineToolbar InlineToolbar={InlineToolbar} />
</div>
</div>
</div>
)
};
export default connect (null, {updateTitle})(NoteDetail)
我使用了 useEffect (第二个)来检查 props 是否正确传递。结果如下:
NoteDetail.js:44 Untitled Page1 (titleState) Untitled Page1 (title)
NoteDetail.js:44 Hi (editorState)
NoteDetail.js:43 Untitled Page1 (titleState) Untitled Page (title)
NoteDetail.js:44 Hi (editorState)
即使道具发生了变化,每次渲染的状态都保持不变。任何人都可以帮忙吗?我会很感激的
解决方案
推荐阅读
- python - 在 exec 内置函数中使用 return 语句是否合法?
- processing - 处理:将绘图循环运行到一个独立的线程中
- android - 从android中的另一个应用程序共享时如何检索链接?
- javascript - 无法使用 Selenium Webdriver (Node JS) 登录网站
- reactjs - 点击一个元素触发点击另一个元素
- javascript - Json 未在 FullCalendar 中加载
- python - AWS Lambda 中的 FFMPEG 只会输出 5 秒的转换视频
- python - 为什么即使我已指定我的链表遍历终止,我也会收到超时错误?
- amazon-web-services - 将 sql 转储文件从 EC2 复制到 RDS 数据库时出现“1046 No Database Selected”错误
- amazon-s3 - 在 EC2 中使用 AWS S3 文件网关,为什么它只能在公有子网中工作,而不能在私有子网中工作?