React应用中用length和substring截断字符遇TypeError错误，求修复方案

这个错误的核心原因是：blogList数组中至少有一个元素的blogdetails属性为undefined（或不存在），导致你尝试读取它的length属性时触发类型错误。

以下是几种直接有效的修复方式：

• 解构时设置默认值
  在遍历解构对象时，给blogdetails指定空字符串作为默认值，确保它始终是字符串类型：

  blogList.map(({ id, blogdetails = "", tags, count }) => (
      // 后续代码保持不变
  ))
  

  这样即使原数据中blogdetails缺失，也会被替换为空字符串，空字符串的length为0，不会触发报错。

• 使用可选链操作符
  在访问length前添加可选链?.，当blogdetails为undefined或null时，会直接返回undefined，避免报错：

  {blogdetails?.length > 10 ? blogdetails.substring(0, 10) + '...' : blogdetails || ""}
  

  这里额外加了|| ""，确保当blogdetails为undefined时，页面显示空内容而非undefined字样。

• 结合两种方式（推荐）
  同时使用默认值和可选链，提供双重保障，适配更多边界情况：

  blogList.map(({ id, blogdetails = "", tags, count }) => (
      <div className='row'>
          <a key={id} href="" className='blogitems'>
              <pre><span>{tags}</span> {blogdetails.length > 10 ? blogdetails.substring(0, 10) + '...' : blogdetails}<span>{count}</span></pre>
          </a>
          <div className='blogitems edit'>
              <button>Edit</button>
          </div>
          <div className='blogitems delete'>
              <button onClick={() => handleBlogDelete(id)}>Delete</button>
          </div>
      </div>
  ))
  

此外，建议检查blogList的数据源（比如接口返回或本地状态初始化），确保每个元素都包含blogdetails字段，从源头避免数据缺失问题。

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