React项目中Marked库gfm、breaks配置不生效问题求助

问题根源 #

你的代码存在两个关键错误导致配置未生效：

• useEffect语法错误：当前写法不符合React useEffect规则，无法在markdownText变化时触发重新解析
• State更新时机问题：handleChange中先调用setMarkdownText，立刻执行textToMarkdown时，markdownText尚未完成更新，解析的是旧值

修正后的代码 #

import React, { useState, useEffect } from 'react';
import marked from 'marked';

const MarkdownEditor = () => {
    const [markdownText, setMarkdownText] = useState("");
    const [markdowned, setMarkdowned] = useState("");

    // 全局配置Marked，仅初始化一次
    useEffect(() => {
        marked.setOptions({
            gfm: true,
            breaks: true,
            xhtml: true
        });
    }, []);

    // 监听markdownText变化，自动触发解析
    useEffect(() => {
        if (markdownText) {
            // 已通过全局配置生效，无需重复传参
            setMarkdowned(marked.parse(markdownText));
        } else {
            setMarkdowned("");
        }
    }, [markdownText]);

    const handleChange = (e) => {
        setMarkdownText(e.target.value);
    };

    return (
        <div>
            <textarea onChange={handleChange} value={markdownText} />
            <div dangerouslySetInnerHTML={{ __html: markdowned }} />
        </div>
    );
};

export default MarkdownEditor;

关键修改说明 #

• 修复useEffect语法：第一个参数为执行函数，第二个参数为依赖数组，当markdownText变化时触发解析逻辑
• 将全局配置放入仅执行一次的useEffect（依赖空数组），避免重复设置
• 移除handleChange中直接调用textToMarkdown的逻辑，让useEffect监听state变化触发解析，确保拿到最新的markdownText值
• 可选：若无需全局配置，也可直接在marked.parse时传入{breaks: true, gfm: true}参数，效果一致

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