在Next.js中使用await时monaco-editor持续加载的问题

问题原因 #

1. 标注了"use client"的组件直接写成async函数，会让组件处于Suspense状态，和@monaco-editor/react的渲染逻辑冲突
2. defaultValue仅在编辑器首次渲染时生效，异步获取的数据返回后不会触发编辑器内容更新

解决方案 #

改用useState管理代码状态，通过useEffect异步获取数据，并用value属性绑定状态，确保数据更新时编辑器同步刷新：

"use client"

import { useState, useEffect } from 'react';
import { getCode } from '@/lib/getTasks';
import Editor from '@monaco-editor/react';

const AppDetails = ({ params }) => {
  const [code, setCode] = useState("");

  useEffect(() => {
    const fetchCode = async () => {
      const fetchedCode = await getCode(params.taskid);
      console.log(fetchedCode);
      setCode(fetchedCode);
    };

    fetchCode();
  }, [params.taskid]);

  return (
    <div>
      <Editor height="90vh" defaultLanguage="python" value={code} />
    </div>
  )
}

export default AppDetails

补充：自定义加载状态 #

如果需要在代码加载完成前显示自定义提示，可以添加条件渲染：

return (
  <div>
    {code ? (
      <Editor height="90vh" defaultLanguage="python" value={code} />
    ) : (
      <div>加载代码中...</div>
    )}
  </div>
)

内容的提问来源于stack exchange，提问作者Nazmus Sakib