时间戳

首页 > 解决方案 > UseEffect 未触发 (NextJS) - CKEditor

next.js - UseEffect 未触发 (NextJS) - CKEditor

问题描述

我正在尝试将CKEditor集成到我的NextJS应用程序中，并为编辑器组件提供以下代码（此解决方案在另一篇 SO 帖子中找到，但不适用于我）。可能的原因似乎是 UseEffect 没有触发。当我在 UseEffect 中执行控制台日志时，我在控制台中看不到任何内容。

import React, { useState, useEffect, useRef } from 'react';
import styles from '../../styles/components/WriteBlog.module.scss';

const WriteBlog = () => {
  const [content, setContent] = useState('');
  const [editorLoaded, setEditorLoaded] = useState(false);
  const editorRef = useRef();
  const { CKEditor, ClassicEditor } = editorRef.current || {};

  useEffect(() => {
    editorRef.current = {
      CKEditor: require('@ckeditor/ckeditor5-react').CKEditor,
      ClassicEditor: require('@ckeditor/ckeditor5-build-classic'),
    };
    setEditorLoaded(true);
    console.log('useEffect ran!');
  }, []);

  return editorLoaded ? (
    <div className={styles.container}>
      <h1 className={styles.headingMain}>Create New Post</h1>
      <div className={styles.editor}>
        <CKEditor
          editor={ClassicEditor}
          data={content}
          onChange={(event, editor) => {
            const data = editor.getData();
            setContent(data);
          }}
        />
      </div>
    </div>
  ) : (
    <div className={styles.editorLoading}>
      <h2>Loading Editor...</h2>
    </div>
  );
};

export default WriteBlog;

我刚刚得到一个我在 return 语句中定义的“正在加载编辑器...”屏幕。我正在按照最新的 CKE 文档正确导入模块。

为什么编辑器没有加载/UseEffect 没有触发？

标签： next.jsckeditor

解决方案

当我将代码从“组件”文件夹移动到应用程序的“页面”文件夹时，这很有效。最初我试图将编辑器作为组件从 components/blog/WriteBlog.jsx 导入到 pages/blog/new/index.js 文件中。

我不知道为什么这个解决方案有效。它似乎违背了分离组件和页面的目的。显然，我在 NextJS 中遗漏了一些基本的东西。对于项目的其余部分，任何见解都会非常方便。

推荐阅读