React 在线文本编辑器行号计数不触发重新渲染问题求助

问题根因 #

你的代码核心错误是调用行号统计函数时没有执行它：你在Array.from(Array(countLine)中传入的是countLine函数本身，而不是函数执行后返回的行数数值，因此行数永远是初始计算的结果，不会随text状态更新重新计算。

修复步骤 #

1. 把countLine改为countLine()，执行函数获取最新行数
2. 修正不合理的HTML结构：不要把ul嵌套在li内部，li只能作为ul/ol的子元素使用
3. 优化行号显示：默认从1开始更符合常规编辑器的使用习惯
4. 可选优化：可以直接计算行数不需要单独封装函数，减少冗余代码

修复后的完整代码 #

import { useState } from 'react';

const Editor = () => {
    const [text, setText] = useState('//');
    // 行数随text状态变化自动重新计算
    const lineCount = text.split(/\r?\n/).length;

    const handleChanges = (e) => {
        setText(e.target.value);   
    }

    return <>
        <form className="editor">
            <div className="line-num-wrapper">
                <ul className="line-num-list">
                  {Array.from({length: lineCount}, (_, i) => (
                    <li key={i}>{i + 1}</li>
                  ))}
                </ul>
            </div>
            <textarea 
              name="text" 
              value={text} 
              className="editorText" 
              onChange={handleChanges} 
              spellCheck="false" 
              id="bg" /* 注意如果bg是变量需要提前定义 */
            />
        </form>
    </>
}

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