UseEffect not firing (NextJS) - CKEditor

Question

我正在尝试整合CKEditor在myNextJS应用程序和有以下代码的编辑器组件(这个解决方案是在另一个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不发射?

Answer 1

当我将代码从'components'文件夹移动到应用程序的'pages'文件夹时，这是有效的。最初，我试图将编辑器作为组件从components/blog/WriteBlog导入。

将JSX放入pages/blog/new/index.js文件中。我不知道为什么这个解决方案是有效的。它似乎违背了分离组件和页面的目的。显然，我错过了一些基本的NextJS。任何见解都将对项目的其余部分非常有用。