React函数组件白屏问题：无法调用字符串方法求助

核心错误原因 #

• React版本不兼容Hook：你使用的React 16.6.1不支持useState Hook——Hook是在React 16.8.0才正式引入的，旧版本直接调用useState会抛出致命错误，导致页面白屏。
• 未声明变量污染全局作用域：代码中直接赋值convertedTxt = txt，未用let/const声明变量，会污染全局作用域，引发不可预期的行为。
• 缺少组件挂载逻辑：仅定义了InputBox组件，但没有通过ReactDOM.render将组件挂载到DOM节点，页面无内容渲染。
• 单词统计逻辑缺陷：txt.split(" ").length会把连续空格识别为多个空单词，导致统计结果错误。

修复后的完整代码 #

JavaScript代码 #

function InputBox() {
  // 初始化空字符串，避免多余空格干扰统计
  const [txt, setTxt] = React.useState("");
  
  const changed = (e) => {
    setTxt(e.target.value);
  };
  
  const covtToUpper = () => {
    setTxt(txt.toUpperCase());
  };
  
  const covtToLower = () => {
    setTxt(txt.toLowerCase());
  };

  // 优化单词统计：过滤空字符串，处理连续空格
  const wordCount = txt.trim() ? txt.split(/\s+/).length : 0;

  return (
    <>
      <div className="box-c">
        <div className="box">
          <h1>Enter Your Text Here!</h1>
          <textarea
            name="input"
            value={txt}
            onChange={changed}
            id="Input"
            rows="10"
          ></textarea>
          <div className="btns">
            <button
              type="button"
              onClick={covtToUpper}
              className="btn btn-primary"
            >
              Convert to Uppercase
            </button>
            <button
              type="button"
              onClick={covtToLower}
              className="btn btn-success"
            >
              Convert to Lowercase
            </button>
          </div>
        </div>
        <div className="box-2">
          <h2>Your text summary</h2>
          <div className="data">
            <b>{txt.length} characters</b>
            <b>{wordCount} words</b>
          </div>
          <b>{(0.008 * wordCount).toFixed(2)} minutes to read</b>
        </div>
        <div className="box-3">
          <h2>Preview</h2>
          <p>{txt || "Enter text above to preview"}</p>
        </div>
      </div>
    </>
  );
}

// 将组件挂载到页面DOM节点
ReactDOM.render(<InputBox />, document.getElementById("root"));

HTML代码 #

<!-- 升级到支持Hook的React版本 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<!-- 添加组件挂载的根节点 -->
<div id="root"></div>

关键修复说明 #

1. 升级React版本：替换为16.8.0及以上版本，确保支持useState Hook。
2. 移除冗余变量：直接基于状态值处理后更新状态，删除未声明的convertedTxt变量。
3. 添加挂载逻辑：通过ReactDOM.render将组件挂载到页面的root节点。
4. 优化统计逻辑：用split(/\s+/)分割单词，过滤空字符串，避免连续空格导致的错误统计；用toFixed(2)优化阅读时间的显示格式。
5. 修正初始状态：将初始状态设为空字符串，避免多余空格影响统计结果。

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