React無法決議字串物件

我有字串型別的物件，想使用 JSON.parse() 決議它。

console.log(post.description);
console.log("Type:- ", typeof(post.description));

字串物件：-

{"blocks":[{"key":"1i9ik","text":"Issue Title","type":"header-three","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"4nluf","text":"Hi,","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"evi0t","text":"","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"5s8vp","text":"Lorem Ipsum is simply dummy text of the printing and typesetting industry.","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":0,"length":11,"style":"BOLD"}],"entityRanges":[],"data":{}},{"key":"fkbca","text":"Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, ","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"3dc6a","text":"when an unknown printer took a galley of type and scrambled it to make a type specimen book.","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"8rfom","text":"","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"es2ha","text":"one","type":"ordered-list-item","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"aeon1","text":"Two","type":"ordered-list-item","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"ei5sb","text":"Three","type":"ordered-list-item","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"bo9vp","text":"Urgent","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":0,"length":6,"style":"BOLD"},{"offset":0,"length":6,"style":"UNDERLINE"}],"entityRanges":[],"data":{}}],"entityMap":{}}

Type:-  string

當我嘗試決議時，會出現以下錯誤：-

console.log(JSON.parse(post.description));

Uncaught SyntaxError: Unexpected token u in JSON at position 0

為什么要決議字串物件？我想使用草稿 js 編輯器組件中的決議輸出來顯示存盤在資料庫中的富文本。

在 Draft Js 編輯器組件中顯示富文本的示例代碼。

const contentState = convertFromRaw(JSON.parse(description));
const editorState = EditorState.createWithContent(contentState);


<Editor editorState={editorState} readOnly={true} />

沙盒代碼作業正常。

本地機器上的代碼不起作用：-

import { Editor, EditorState, convertFromRaw } from "draft-js";

const PostPage = () => {

  const dispatch = useDispatch();
  const params = useParams();
  const { postId } = useParams();


  const { post } = useSelector((state) => state.posts);

  useEffect(() => {
    dispatch(getpost(postId));
  }, [dispatch]);


  const contentState = convertFromRaw(JSON.parse(post.description));

  const editorState = EditorState.createWithContent(contentState);

 return (
    <>
      <div className="post-content-description">
        <Editor editorState={editorState} readOnly={true} />
      </div>
    </>
  );
};

export default PostPage;

它給出了錯誤Uncaught SyntaxError: Unexpected token u in JSON at position 0

為什么是post.description 未定義的？關于這個還能做什么？

uj5u.com熱心網友回復：

您正在嘗試決議undefined，因為加載組件時未定義 post

Unexpected token u in JSON at position 0是結果JSON.parse(undefined)

嘗試以這種方式改變

import { Editor, EditorState, convertFromRaw } from "draft-js";

const PostPage = () => {

  const dispatch = useDispatch();
  const params = useParams();
  const { postId } = useParams();
  const [editorState, setEditorState] = useState(null)

  const { post } = useSelector((state) => state.posts);

  useEffect(() => {
    dispatch(getpost(postId));
  }, []);

   useEffect(() => {
    if(!post) return;
      console.log(post.description);
      console.log("Description type:- ", typeof post?.description);

      const contentState = convertFromRaw(JSON.parse(post.description));

  console.log(contentState);
  console.log("Content state type:-  ", typeof contentState);

  setEditorState(EditorState.createWithContent(contentState));

  
  }, [post]);
 

  return editorState && (
    <>
      <div className="post-content-description">
        <Editor editorState={editorState} readOnly={true} />
      </div>
    </>
  );
};

export default PostPage;

uj5u.com熱心網友回復：

在您發布的沙箱中，您逃脫了'內部“[...] 已成為行業標準 [...]”（例如：）industry\'s standard。

在您在問題中發布的文本中，該單引號不會被轉義。

如果你使用

const post = {
    subject: "Some Subject",
    description: '/* text with unescaped single quote */'
}

...，內容post.description將不是有效的 JSON 字串。

您要么轉義單引號（如在沙箱中），要么使用反引號進行描述：

const post = {
  subject: "Some subject",
  description: `/* text with unescaped single quote */`
}

uj5u.com熱心網友回復：

嘗試先對物件進行字串化，然后再對其進行決議。

JSON.parse(JSON.stringify(post.description))

uj5u.com熱心網友回復：

這段代碼對我有用：-

import { Editor, EditorState, convertFromRaw } from "draft-js";

const PostPage = () => {
  const dispatch = useDispatch();
  const params = useParams();
  const { postId } = useParams();

  const [description, setDescription] = useState(null);
  const [contentState, setContentState] = useState(null);
  const [editorContent, setEditorContent] = useState(null);

  const { post, isSuccess } = useSelector((state) => state.posts);

  useEffect(() => {
    dispatch(getpost(postId));
  }, []);

  useEffect(() => {
    if (post) {
      setDescription(post?.description);
    }
  }, [post]);

  useEffect(() => {
    if (description) {
      const contentState = convertFromRaw(JSON.parse(description));
      setContentState(contentState);
    }
  }, [description]);

  useEffect(() => {
    if (contentState) {
      const editorState = EditorState.createWithContent(contentState);
      setEditorContent(editorState);
    }
  }, [contentState]);

  return (
    editorContent && (
      <>
        <div className="wrapper">
          <div className="post-content-description">
            <Editor editorState={editorContent} readOnly={true} />
          </div>
        </div>
      </>
    )
  );
};

export default PostPage;

我稍微調整了@R4ncid建議的解決方案，他走在正確的道路上。

我希望有一種方法可以不使用多個 useEffect 掛鉤，我不知道我撰寫的代碼是否正確，但這是可行的。

標籤：javascript 反应 json 草稿

上一篇：檢索每個資料組的最后一個值-OracleSQL

下一篇：從熊貓的列中減去特定值