不显示来自 localStorage 的数据

Question

我正在为我的项目使用 ReactJs，并且正在使用富文本编辑器，当我在内容 aria 中写一些东西时，我可以将数据保存在 localStorage 中，但是当我想在其中保存数据时刷新整个页面后的内容主体，它不会在内容 aria 中显示数据，但我已将数据成功保存在 localStorage

不知道哪里出了问题，

我试过这种方式：

  const blogFromLS = () => {
    if (typeof window === "undefined") {
      return false;
    }

    if (localStorage.getItem("blog")) {
      return JSON.parse(localStorage.getItem("blog"));
    } else {
      return false;
    }
  };

  const [body, setBody] = useState({
    editorState: EditorState.createEmpty(),
    blogFromLS: blogFromLS(),
  });

  const { editorState } = body;

  const onEditorStateChange = (editorState) => {
    setBody({ editorState });
    formData.set(
      "body",
      draftToHtml(convertToRaw(editorState.getCurrentContent()))
    );
    if (typeof window !== "undefined") {
      localStorage.setItem(
        "blog",
        JSON.stringify(
          draftToHtml(convertToRaw(editorState.getCurrentContent()))
        )
      );
    }
  };

  <div className="form-group">
          <Editor
            className="editorCustom"
            editorState={editorState}
            wrapperClassName="demo-wrapper"
            editorClassName="demo-editor"
            onEditorStateChange={onEditorStateChange}
            placeholder="write something..."
            // onChange={handleBody}
            // value={body}
          />
        </div>

有什么建议吗

Answer 1

您接近于达到您想要实现的目标。您必须调整的是初始化编辑器状态的方式。在初始化编辑器组件期间，您必须传递存储在 localStorage 中的状态。为此，您必须使用 EditorState.createWithContent 静态方法。

const [editorState, setEditorState] = useState({
editorState: blogFromLS()
  ? EditorState.createWithContent(blogFromLS())
  : EditorState.createEmpty()
});

另外，您似乎不需要使用 draftToHtml，因为我们需要保存原始内容状态，而不是 html 或其他任何内容。

完整的解决方案如下：

import "./styles.css";
import { Editor, EditorState, convertToRaw, convertFromRaw } from "draft-js";
import "draft-js/dist/Draft.css";
import { useState } from "react";

const blogFromLS = () => {
  if (typeof window === "undefined") {
    return false;
  }

  if (localStorage.getItem("blog")) {
    return convertFromRaw(JSON.parse(localStorage.getItem("blog")));
  } else {
    return false;
  }
};

export default function App() {
  const [editorState, setEditorState] = useState({
    editorState: blogFromLS()
      ? EditorState.createWithContent(blogFromLS())
      : EditorState.createEmpty()
  });
  const onChange = (editorState) => {
    setEditorState({ editorState });
    if (typeof window !== "undefined") {
      localStorage.setItem(
        "blog",
        JSON.stringify(convertToRaw(editorState.getCurrentContent()))
      );
    }
  };
  return (
    <div className="App">
      <Editor editorState={editorState.editorState} onChange={onChange} />
    </div>
  );
}

代码片段也可以在 sandbox 中找到。

不显示来自 localStorage 的数据

Not showing data from localStorage

javascript

node.js

reactjs

rich-text-editor