React/Django应用中react-string-replace处理Markdown高亮的State异常问题

问题场景 #

你在测试react-string-replace时，尝试通过遍历数组并调用setState拼接字符串，但最终stringData只保留了最后一个数组元素的值，而非预期的完整拼接结果。

代码与现象回顾 #

测试代码：

import React from 'react'
import ReactMarkdown from 'react-markdown'
import reactStringReplace from 'react-string-replace';
export default function Mark(){
    const [stringData, setStringData] = React.useState("");
    
    const content = 'Hey my number is 555-555-5555.';
    const replacearray= reactStringReplace(content, 's', (match, i) => (
        `===${match}===`
    ));
    console.log(replacearray)
    replacearray.map(word =>{
        console.log(word)
        setStringData(stringData + `${word}`)
    })
    console.log(stringData)
    return(
       <ReactMarkdown>{stringData}</ReactMarkdown>
    )
}

控制台输出：

• replacearray：Array(3) [ "Hey my number i", "===s===", " 555-555-5555." ]
• 遍历的word依次为：Hey my number i、===s===、 555-555-5555.
• 最终stringData： 555-555-5555.

原因解析 #

1. setState的异步特性：React的setState不会立即更新状态，而是将更新请求加入队列批量处理。循环中连续调用setStringData时，每次访问的stringData都是初始的空字符串（状态还未完成更新）。
2. 闭包陷阱：循环里的每个setStringData都捕获了当前作用域下的stringData值（初始空字符串），三次更新实际都是"" + word，最终状态被最后一次更新覆盖，只保留最后一个word的值。

解决方案 #

根本不需要用状态来拼接数组，直接将replacearray用join('')合并成字符串即可：

import React from 'react'
import ReactMarkdown from 'react-markdown'
import reactStringReplace from 'react-string-replace';

export default function Mark(){
    const content = 'Hey my number is 555-555-5555.';
    // 直接将数组转为完整字符串
    const replacedContent = reactStringReplace(content, 's', (match, i) => (
        `===${match}===`
    )).join('');

    return(
       <ReactMarkdown>{replacedContent}</ReactMarkdown>
    )
}

如果后续需要结合搜索框实现动态高亮（用户输入关键词后实时处理），可以用状态存储搜索关键词，渲染时动态生成内容：

import React, { useState } from 'react'
import ReactMarkdown from 'react-markdown'
import reactStringReplace from 'react-string-replace';

export default function Mark(){
    const [searchKeyword, setSearchKeyword] = useState('');
    const content = 'Hey my number is 555-555-5555.';

    let displayContent = content;
    if (searchKeyword) {
        displayContent = reactStringReplace(content, searchKeyword, (match, i) => (
            `<mark>${match}</mark>` // 用mark标签实现高亮，需开启HTML解析
        )).join('');
    }

    return(
        <div>
            <input 
                type="text" 
                value={searchKeyword}
                onChange={(e) => setSearchKeyword(e.target.value)}
                placeholder="搜索关键词..."
            />
            <ReactMarkdown allowDangerousHtml>{displayContent}</ReactMarkdown>
        </div>
    )
}

注意：使用allowDangerousHtml时需确保内容可信，避免XSS风险。

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