프론트엔드✏️/코드캠프

[문제 해결] Warning: Failed prop type: The prop `children` is marked as required in `InfiniteScroll`, but its value is `undefined`.

당근먹는하니 2022. 6. 23. 14:36
728x90
반응형

Warning: Failed prop type: The prop `children` is marked as required in `InfiniteScroll`, but its value is `undefined`.
    at InfiniteScroll

 

 

data가 불러와지기 전에 인피니트 스크롤이 불러와져서 이런 문제가 생기는 것 같아서 

 

{props.data && (
          <S.MyScroll
            pageStart={0}
            loadMore={props.loadMore}
            hasMore={true}
            useWindow={false}
          >
            {props.data?.fetchUseditems.map((el: any) => (
              <S.SummaryWrapper
                key={el._id}
                el={el}
                onClick={props.onClickProduct(el)}
              >
                <S.SummaryImg>
                  <S.Image
                    src={
                      el.images[0]
                        ? `https://storage.googleapis.com/${el?.images[0]}`
                        : "/img/놀자에몽.png"
                    }
                  ></S.Image>
                </S.SummaryImg>
                <S.ItemName>{el?.name}</S.ItemName>
                <S.ItemBox>
                  <S.ItemSeller>{el?.seller.name}</S.ItemSeller>
                  <S.ItemPrice>{el?.price}원</S.ItemPrice>
                  {el?.soldAt}
                </S.ItemBox>
                {/* {props.basket.find((basketEl) => basketEl._id === el._id) ? (
                <button onClick={props.onClickCancel(el)}>담기 취소</button>
              ) : (
                <button onClick={props.onClickBasket(el)}>담기</button>
              )} */}
              </S.SummaryWrapper>
            ))}
          </S.MyScroll>
        )}

{ }로 감싼 뒤 그 안에 props.data && 해서 data가 있을 때만 인피니트 스크롤이 나오도록 설정하니까 빨간 에러 메세지가 안 뜬다! 야홋

728x90
반응형