리액트 타입에러 해결하기

devMarco·2022년 4월 30일
0

Error Handling Log

목록 보기
3/3

타이밍 이슈로 인한 랜더링이 올바르게 되지 않아 잘 나오던 UI가 안나오게 되었다.

  const getTitle = () => {
    if (data[0].category === '탁주') {
      return '술담화 전통주 소믈리에의 이번 탁주 P.I.C.K!';
    } else if (data[0].category === '약주') {
      return '술담화 약주약주 소믈리에의 이번 약주 P.I.C.K!';
    } else if (data[0].category === '청주') {
      return '술담화 청주청주 소믈리에의 이번 청주 P.I.C.K!';
    } else if (data[0].category === '증류주') {
      return '술담화 증류주 소믈리에의 이번 증류주 P.I.C.K!';
    }
  };
return (
    <section ref={ref} className="mainSojuRecommend">
      <div className="sectionContent">
        "어떤 술을 마실지 고민이라면, 이 술은 어때요?"
      </div>
      <div className="sectionSubContent">{getTitle()}</div>
      <div className="viewMore">더보기 </div>
      <div className="sojuCarouselOuter">
        <div className={`sojuCarouselSet${productCardNum}`}>
          {data.map(value => (
            <ProductBoxCard key={value.id} data={value} />
          ))}
        </div>
      </div>
      <button
        className={
          data[0]?.category === '탁주' ? 'arrowLeftBtnTak' : 'arrowLeftBtn'
        }
      >
        <i className="fa-solid fa-angle-left" onClick={moveCardLeft} />
      </button>
      <button
        className={
          data[0]?.category === '탁주' ? 'arrowRightBtnTak' : 'arrowRightBtn'
        }
      >
        <i className="fa-solid fa-angle-right" onClick={moveCardRight} />
      </button>
      {data[0]?.category === '탁주' && <SpecialPriceCard />}
    </section>
  );
});

ui가 랜더링 되기 전에 data가 넘어오는 바람에 타입에러가 발생되었다.

  const getTitle = () => {
    if (data[0]?.category === '탁주') {
      return '술담화 전통주 소믈리에의 이번 탁주 P.I.C.K!';
    } else if (data[0]?.category === '약주') {
      return '술담화 약주약주 소믈리에의 이번 약주 P.I.C.K!';
    } else if (data[0]?.category === '청주') {
      return '술담화 청주청주 소믈리에의 이번 청주 P.I.C.K!';
    } else if (data[0]?.category === '증류주') {
      return '술담화 증류주 소믈리에의 이번 증류주 P.I.C.K!';
    }
    return null;
  };

0개의 댓글