使用.toUpperCase处理React组件props时页面无法渲染的问题

问题描述 #

开发书籍列表React应用时，尝试将作者名转为大写后页面无法渲染，控制台报错：

Uncaught TypeError: Cannot read properties of undefined (reading 'toUpperCase')

前两个书籍组件的props.author.toUpperCase()能正常输出，但整体页面崩溃。

问题原因 #

代码中BookList组件渲染了三个Book实例，前两个都传递了完整的img、title、author属性，但第三个<Book />未传入任何props。当Book组件尝试访问props.author.toUpperCase()时，第三个实例的props.author为undefined，无法调用toUpperCase()方法，导致页面报错。

解决方案 #

方案1：移除无属性的Book组件 #

直接删除未传参的<Book />，确保所有Book组件都有完整属性传入：

function BookList() {
  return (
    <section className="booklist">
      <Book
        img={firstBook.img}
        title={firstBook.title}
        author={firstBook.author}
      />
      <Book
        img={secondBook.img}
        title={secondBook.title}
        author={secondBook.author}
      />
      {/* 删除无props的<Book /> */}
    </section>
  );
}

方案2：设置组件默认props #

如果需要保留空的Book组件，给Book组件添加默认属性，避免undefined引发的报错：

const Book = (props) => {
  return (
    <article className="book">
      <img src={props.img} alt="bookcover" className="bookcover" />
      <h1>{props.title}</h1>
      <h4>{(props.author || '未知作者').toUpperCase()}</h4>
    </article>
  );
};

// 规范设置默认props的方式
Book.defaultProps = {
  img: '',
  title: '未命名书籍',
  author: '未知作者'
};

方案3：使用可选链操作符 #

利用ES2020的可选链操作符?.，当属性不存在时返回undefined，避免报错：

const Book = (props) => {
  return (
    <article className="book">
      <img src={props.img} alt="bookcover" className="bookcover" />
      <h1>{props.title}</h1>
      <h4>{props.author?.toUpperCase()}</h4>
    </article>
  );
};

这种方式下，第三个Book组件的作者名会显示为空，不会导致页面崩溃。

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