Rerender行计数反应

Question

我正在尝试创建一个类似于在线文本编辑器的东西，基于React。我想在文本区域附近添加一个div，它计算我当前正在使用的行数。因此，我创建了一个funciotn来计算文本区域中的行数，然后添加一个元素来获取该数字并创建该列表。问题是，当我渲染时，它会正确地创建列表，但当我写一些东西时，它不会重新渲染。问题是，当我写一些东西的时候，它不会重现。下面是我的代码：

const Editor = () => {
    const [text, setText] = useState('//');

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

    const countLine = () => {
        let lines = text.split(/\r|\r\n|\n/);
        let count = lines.length;
        return  count;
    }

    return <>
        <form className="editor">
            <div>
                <li>{/*this is where i create the numbers*/}
                {<ul>{Array.from(Array(countLine), (e, i) => {
                    return <li key={i}>{i}</li>
                    })}</ul>}
                </li>
            </div>
            <textarea name="text" value={text} className="editorText" onChange={handleChanges} spellCheck="false" 
            id = {bg}></textarea>
        </form>
    </>
}

我希望当我进行更改时，代码会自动更新行数，但我不能使用handleChanges函数，或者至少我不知道如何更新。有人能帮我吗？谢谢

Answer 1

解决了添加新状态值的问题，每次有更改时，都会重新计算。然后，重新创建数字。代码如下：

import { useState } from "react";

const Editor = () => {
    const [text, setText] = useState('//Your code');
    const [line, setLine] = useState(1);


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

    const countLine = () => {
        let lines = text.split(/\r|\r\n|\n/);
        let count = lines.length;
        console.log(count);
        return  count;
    }

    return <>
        <form className="editor">
            <div>
                <div class="number"> 
                    <ul>
                        {Array.from(Array(line), (e, i) => {
                            return <li key={i}>{i + 1}</li>
                        })}
                    </ul>
                </div>
            </div>
            <textarea name="code" value={text} className="editorText" onChange={handleChanges} spellCheck="false" 
            id = {bg}></textarea>
        </form>
    </>
}

export default Editor;