在 React 中创建一个单词计数器（使用 Hooks）

import './App.css';
import React, {useEffect, useState} from "react";
export default function App() {
    //文本
    const [text,setText] = useState('')
    //单词数
    const [wordCount,setWordCount] = useState(0)
    //字符数
    const [charCount,setCharCount] = useState(0)
    function changeHandler(e) {
        setText(e.target.value)
    }
    useEffect(() => {
        //单词数组
        const words = text.split(' ');
        //更新字数
        let wordCount = 0
        words.forEach((word) => {
            if (word.trim() !== ''){
                wordCount++
            }
        })
        setWordCount(wordCount)
        //更新字符数
        setCharCount(text.length)
    },[text])
    return (
        <div className='container'>
            <h2>自动计算输入单词数</h2>
            <div>
                <textarea
                    value={text}
                    onChange={changeHandler}
                    placeholder="输入你的暴富想法"
                ></textarea>
                <p>单词个数：{wordCount}</p>
                <p>字数：{charCount}</p>
            </div>
        </div>
    )
}