無法讀取未定義的屬性（讀取'split'）TypeError: 無法讀取未定義的屬性（讀取'split'）

Question

我正在嘗試從傳遞給React函數組件的release_date（作為props）中獲取發行年份，但是我得到了字串未定義的錯誤。

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;

當我直接使用release_date時，它可以正常渲染，沒有問題。但是當我對字串應用任何方法時，它會傳回未定義。 （release_date是一個字串，如"2023-07-18"）

Answer 1

我建議添加一個條件來確保我不會有空括號（例如，如果您的資料獲取返回為空）。

<a className="hover:cursor-pointer hover:text-gray-200">{title}</a>
{release_date && ` (${release_date.split("-")[0]})`}