Question

未捕获的类型错误：无法使用基于 React 类的组件读取 null 的属性（读取“slice”）

2022-09-22

1042

javascript reactjs web-development-server

我正在学习 React，我试图制作一个基于 React 类的组件，在该组件中，我试图从文章数组中获取数据，该数组包含新闻文章的数据，例如 title、description、urlToimage、url。 我试图将标题和描述字符串分别缩短为最大长度 40 和 80，我尝试使用切片来执行此操作 ，如您所见，但遇到了下面提到的错误。我还确保标题和描述是字符串或数组数据类型，以避免任何数据类型引起的错误，标题和描述都写为 “title” : “ content inside ” 。其余代码在没有切片的情况下运行良好，并按预期显示所有数据。我不知道语法是否已更改，因为我正在遵循 2021 年的教程。

{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>
          })}

react-refresh-runtime.development.js:315 Uncaught TypeError: Cannot read properties of null (reading 'slice')

Answer 1

您收到的响应中的标题可能是 undefined 。

{this.state.articles.map((elements) => {
  let title = elements?.title || ""; // Either this approach
  let description = elements?.description || ""; // Either this approach

  return <div className="col-md-4 my-3" key={elements.url}> // Or use optional chaining 
    <NewsItem title={title?.slice(0,45)} description={description?.slice(0,80 )} imageUrl={elements.urlToImage} newsUrl={elements.url}></NewsItem>
  </div>
})}

您可以使用 or(||) 运算符将标题初始化为空字符串，或者使用可选链接，如示例所示。

Answer 2

这里的问题是，您所在州的一篇或所有 articles 都包含 description 或 title ，值为 null 。这就是您收到此错误消息的原因 Uncaught TypeError: Cannot read properties of null (reading 'slice')

只需在切片之前添加 null/undefined 检查，它就可以正常工作。

如果您使用可选链接，可以按如下方式实现。

{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 description = elements.description;
               
                return <div className="col-md-4 my-3" key={elements.url}>
                  <NewsItem title={title?title.slice(0,45):""} description={description ? description.slice(0,80 ) : ""} imageUrl={elements.urlToImage} newsUrl={elements.url}></NewsItem>
                </div>
              })}