如何实现句号后首字母大写？React代码报错：Cannot read properties of undefined

错误原因 #

你的代码出现报错，核心是两个问题：

1. 当文本包含连续句号、开头/结尾是句号时，split(".")会生成空字符串元素（比如"hello..world"分割后是["hello", "", "world"]），空字符串的arr[0]是undefined，调用toUpperCase()自然会抛出错误。
2. 当前逻辑只提取了每个片段的首字母并大写，丢失了片段剩余的字符，也没有把句号重新拼接回去，最终结果完全不符合预期。

修正后的完整代码 #

import { useState } from 'react';

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

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

  const capitalizeClick = () => {
    // 按句号分割文本，同时过滤掉空片段（处理连续句号、首尾句号）
    const textParts = text.split(".").filter(part => part.trim() !== "");
    
    // 对每个非空片段处理：首字母大写 + 剩余字符
    const processedParts = textParts.map(part => {
      const trimmedPart = part.trim();
      // 保险处理，避免极端空值情况
      if (!trimmedPart) return "";
      return trimmedPart[0].toUpperCase() + trimmedPart.slice(1);
    });

    // 用「句号+空格」连接片段，还原正常文本格式
    setText(processedParts.join(". "));
  };

  return (
    <div>
      <textarea 
        className="form-control" 
        value={text} 
        onChange={handleOnChange}  
        id="myBox" 
        rows={15} 
      />
      {/* 补充触发功能的按钮 */}
      <button onClick={capitalizeClick} style={{ marginTop: "10px" }}>
        句号后首字母大写
      </button>
    </div>
  );
};

export default TextCapitalizer;

关键优化点 #

• 过滤空片段：用filter(part => part.trim() !== "")去掉分割后产生的空字符串，彻底避免undefined报错。
• 处理空格干扰：每个片段先执行trim()，避免片段前后的空格导致首字母取到无效空格字符。
• 完整文本还原：不仅大写首字母，还用slice(1)保留片段剩余字符，最后用. 连接恢复符合排版习惯的文本结构。
• 补充触发入口：原代码缺少触发capitalizeClick的按钮，这里补上确保功能能正常触发。

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