React类组件使用slice处理新闻数据时出现Cannot read properties of null报错

报错不是React语法变更导致的，核心问题是部分articles数组里的元素，其title或description字段实际是null/undefined——虽然你以为都是字符串，但数据源里可能存在空值。没调用slice时，React会自动处理null/undefined（渲染为空内容），但直接对null调用slice方法就会触发类型错误。

给title和description加空值兜底，确保调用slice前是字符串类型，以下是两种常用写法：

写法1：短路运算符兜底空值 #

{this.state.articles.map((elements) => {
  // 用空字符串兜底null/undefined
  let title = elements.title || '';
  let description = elements.description || '';
 
  return <div className="col-md-4 my-3" key={elements.url}>
    <NewsItem 
      title={title.slice(0, 45)} 
      description={description.slice(0, 80)} 
      imageUrl={elements.urlToImage} 
      newsUrl={elements.url}
    ></NewsItem>
  </div>
})}

写法2：可选链+空值合并运算符（更严谨） #

如果你的环境支持ES2020+，可以用更严谨的写法，避免空字符串被误判：

{this.state.articles.map((elements) => {
  let title = elements.title ?? '';
  let description = elements.description ?? '';
 
  return <div className="col-md-4 my-3" key={elements.url}>
    <NewsItem 
      title={title.slice(0, 45)} 
      description={description.slice(0, 80)} 
      imageUrl={elements.urlToImage} 
      newsUrl={elements.url}
    ></NewsItem>
  </div>
})}

额外优化：截取后加省略号（可选） #

如果需要在截取后的文本末尾加省略号（表示内容被截断），可以判断原文本长度是否超过截取长度：

{this.state.articles.map((elements) => {
  let title = elements.title ?? '';
  let processedTitle = title.length > 45 ? `${title.slice(0, 45)}...` : title;
  
  let description = elements.description ?? '';
  let processedDesc = description.length > 80 ? `${description.slice(0, 80)}...` : description;
 
  return <div className="col-md-4 my-3" key={elements.url}>
    <NewsItem 
      title={processedTitle} 
      description={processedDesc} 
      imageUrl={elements.urlToImage} 
      newsUrl={elements.url}
    ></NewsItem>
  </div>
})}

你可以在代码里加一行打印，确认是否存在空值：

console.log(elements.title, typeof elements.title);
console.log(elements.description, typeof elements.description);

运行后查看控制台，就能找到导致报错的那一条数据的字段值。

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