React函数组件中调用split处理release_date props遇未定义错误

问题根源 #

组件首次渲染阶段，release_date可能还没被传入（比如数据是异步加载的，还没返回），这时它的取值是undefined。直接渲染undefined时，React会自动输出空内容，所以你觉得显示正常；但调用split()方法时，就会触发“读取undefined的split属性”的错误。

几种可行的解决办法 #

1. 用可选链+空值合并（最简洁） #

通过?.判断release_date是否存在，存在才调用split，用??处理无年份的情况：

{release_date?.split("-")[0] ?? ""}

2. 条件渲染判断 #

用三元表达式显式检查release_date的有效性：

{release_date ? release_date.split("-")[0] : ""}

3. 给props设置默认值 #

解构props时给release_date默认空字符串，确保它永远是字符串类型：

const Banner = ({ backdrop_path, poster_path, title, release_date = "" }) => {
  // 后续代码调用split就不会报错
}

修改后的完整代码 #

这里用最简洁的可选链写法：

const Banner = ({ backdrop_path, poster_path, title, release_date }) => {
  return (
    <div
      className="bg-cover bg-center"
      style={{
        backgroundImage: `url('https://image.tmdb.org/t/p/original${backdrop_path}')`,
      }}
    >
      <div className="bg-sky-200/80">
        <div className="flex flex-nowrap p-12">
          <PosterCard poster_path={poster_path} />
          <div className="grow px-8">
            <div className="text-4xl text-white font-bold">
                <a className="hover:cursor-pointer hover:text-gray-200">{title}</a> ({release_date?.split("-")[0] ?? ""})
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Banner;

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