[에러] Cannot update a component (``) while rendering a different component

옥수수의 코딩이야기·2023년 2월 5일
0

에러

목록 보기
2/18
post-thumbnail
// 선택된 건물 유형 options
  const detailBuildingOptions = useMemo(() => {
    switch (largeBuildingType) {
      case "아파트": {
        const { apartmentBuildingTypeList } = require("../../lib/staticData");
        dispatch(
          registerRooomAction.setBuildingType(apartmentBuildingTypeList[0])
        );
        return apartmentBuildingTypeList;
      }
    (...)
      <div className="register-room-building-selector-wrapper">
        <Selector
          type="register"
          disabled={!largeBuildingType}
          value={buildingType || undefined}
          defaultValue="하나를 선택해주세요"
          disabledOptions={disabledlargeBuildingTypeOptions}
          label="건물 유형을 선택하세요."
          options={detailBuildingOptions}
          isValid={!!buildingType}
          onChange={onChangeBuildingType}
        />
    </div>     

문제 : 건물 유형을 선택했을 때 콘솔에 에러 문구가 나타났다.
Cannot update a component (``) while rendering a different component
이유 : 컴포넌트 렌더링 하는 동안 함수를 호출했기 때문에 컴포넌트를 그리다 말다 에러가 났다. React V16.3.0.부터 생긴 에러메시지다.
해결방안 : useEffect 사용하기

const [detailBuildingOptions, setDetailBuildingOptions] = useState<string[]>([]);

useEffect(() => {
		// 선택된 건물 유형 options
		switch (largeBuildingType) {
			case '아파트': {
				dispatch(
					registerRoomActions.setBuildingType(apartmentBuildingTypeList[0])
				);
				return setDetailBuildingOptions(apartmentBuildingTypeList);
			}
           (...)
	}, [largeBuildingType]);
           (...)
<div className='register-room-building-selector-wrapper'>
     <Selector
          isValid={!!largeBuildingType}
          type='register'
          value={
          largeBuildingType ? largeBuildingType : '하나를 선택해주세요.'
          }
          disabledOptions={disabledLargeBuildingTypeOptions}
          label='우선 범위를 좁혀볼까요?'
          options={largeBuildingTypeList}
          onChange={onChangeLargeBuildingType}
          />
</div>

useMemo를 살리면서 useEffect를 찾느라 답을 찾을 수 없었다.

참고
수정 전 코드) https://github.com/jinsujj/next.js-bnb-project/blob/main/components/register/RegisterRoomBuilding.tsx
수정 후 코드)https://github.com/BBD810/next-bnb/blob/main/components/room/register/RegisterRoomBuilding.tsx

profile
프론트엔드 공부중 기억은 블로그가 대신합니다.

0개의 댓글