React中用split和slice截断长文本添加...失效问题求助

以下是你的代码可能存在的问题及对应的修复方案：

1. 未处理res.title为空/undefined的情况 #

如果props.blogs中某个项的title是null、undefined或者空字符串，调用split(' ')会抛出错误，直接导致截断逻辑失效。

2. 连续空格导致单词计数不准确 #

如果标题中有多个连续空格，split(' ')会生成空字符串元素，比如"hello world".split(' ')会得到["hello", "", "", "world"]，这会让words.length被错误计算，可能明明实际单词数不足30，却因为空元素触发截断，或者反过来。

3. 测试文本本身未超过30个单词 #

如果你的测试数据里所有title的单词数都≤30，自然看不到...的截断效果。

修复后的截断函数 #

function truncate(text) {
  // 先处理空值、undefined等异常情况
  if (!text) return '';
  
  // 使用正则分割，自动忽略连续空格，避免生成空元素
  const words = text.trim().split(/\s+/);
  const truncated = words.slice(0, 30).join(' ');
  
  return words.length > 30 ? `${truncated}...` : truncated;
}

验证调试步骤 #

• 加日志确认数据：在truncate函数内添加调试代码，直观查看每个标题的内容和单词数：

  console.log('当前标题:', text, '实际单词数:', words.length);
  

• 检查组件数据结构：确认props.blogs中的每个项确实存在title字段，没有拼写错误（比如写成res.Title或res.name）。

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