优化下面代码 import useState useEffect from react;import Header from componentsHeaderimport Loading from componentsLoadingimport CustomMarkdownEditor from componentsMarkdownEditor;export default function

import { useState, useEffect } from 'react'; import Header from '../components/Header'; import Loading from '../components/Loading'; import CustomMarkdownEditor from '../components/MarkdownEditor';

export default function ID({ data }) { const [content, setContent] = useState(data.content || 'undefined'); const [loading, setLoading] = useState(!data);

useEffect(() => {
	if (data) setLoading(false);
}, [data]);

return (
	<>
		<Header title={data.title || 'undefined'} />
		{loading ? (
			<Loading />
		) : (
			<CustomMarkdownEditor
				content={content}
				onChange={(editor, data, value) => setContent(value)}
				rehypeRewrite={(node, index, parent) => {
					if (node.tagName === 'a' && parent && /^h[1-6]/.test(parent.tagName)) {
						parent.children = parent.children.slice(1);
					}
				}}
			/>
		)}
	</>
);

}

export const getServerSideProps = async ({ params }) => { try { const url = process.env.NEXT_PUBLIC_BLOG_ADDRESS; const id = params?.id; const res = await fetch(${url}/api/${parseInt(id)}); const json = await res.json(); const data = json?.data?.[0] || {}; return { props: { data } }; } catch (error) { console.error(error); return { props: { data: {} } }; } };