Typescript A is possibly 'null' or 'undefined'. 오류 처리 관련

Question

다음과 같이 아코디언 메뉴를 구성하기 위해서 상위 컴포넌트에서 title, contents을 props로 전달하려고 합니다.... const productContents : string[] = ['상품 리스트', '상품 등록']; return( <>
)전달 받은 props 중 Contents 컴포넌트 내부에 contests(string[] 타입) 으로 전달하여 갯수 만큼 하위 메뉴를 만들려고 합니다.import React from "react"; import styled from "styled-components"; type Props = { title?: string | React.ReactNode; contents?: string[] | React.ReactNode; }; function Accordion({title, contents} : Props) { const parentRef = React.useRef(null); const childRef = React.useRef(null); const [isCollapse, setIsCollapse] = React.useState(false); const handleButtonClick = React.useCallback( (event :React.MouseEvent) => { event.stopPropagation(); if (parentRef.current === null || childRef.current === null) { return; } if (parentRef.current.clientHeight > 0) { parentRef.current.style.height = "0"; } else { parentRef.current.style.height = `${childRef.current.clientHeight}px`; } setIsCollapse(!isCollapse); }, [isCollapse] ); const parentRefHeight = parentRef.current?.style.height ?? "0px"; return (

{title}

{ (typeof contents !== 'undefined' || contents !== null) //타입 가드 이후에도 오류 발생 ? props.contents.map((content: string)=>(

{content}

)) : null } ); }타입에 오류가 발생하여 타입 처리를 진행했는데도 contents와 map에 다음과 같은 오류가 발생합니다.어떻게 해결해야 할까요?

hellooo · Accepted Answer

타입에서 reactnode를 지워보세요.. contents가 string 배열이면 그냥 string[]타입만 주어도 상관없습니다 에러 문구 보시면 아시겠지만 ReactNode 타입 때문에 map() 메소드가 제대로 동작을 하고 있지 않아요

Typescript A is possibly 'null' or 'undefined'. 오류 처리 관련

1개의 답변

기술 목록