객체가 null로 전달 될 때 React 앱 충돌을 방지하는 방법

내 React 앱에는 site라는 객체가 null 객체로 전달되는 상황이 있습니다. 이로 인해 앱이 충돌하고이를 처리하는 방법을 모르겠습니다. 사이트 개체는 특정 상황에서 null 일 수 있으므로 null 개체가 올 때 앱이 충돌하지 않도록해야합니다.

이 예가 있습니다

const Sites = ({
  isOpen,
  onClose,
  site,
  onChange: onChangeSelectedSite = () => {},
}) => {
  
  <CODE>
  const preparedSites = useMemo(
    () =>
      sites
        .sort(sortSiteSelection(site))
        .map(elm => {
          const arr = [
            elm.siteId,
            elm.city,
            elm.state,
            elm.country,
            elm.address,
            elm.status,
          ];
          if (nearestSites.length)
            arr.push(
              nearestSites.find(s => s.closestSiteId === elm.siteId).distance,
            );
          return arr;
        })
        .sort((a, b) => a[6] - b[6]),
    [sites, site, nearestSites],
  );
  
  <code>

}

위의 코드는 해당 줄에서 사이트 광고를 수신하는 .sort것 site === null입니다.

사이트는 다음 상위에서 전달됩니다.

const SitesChangeButton = ({ site, onChange }) => {
  <code>
  <Sites
        site={site}
        isOpen={isOpenNew}
        onClose={onCloseNew}
        onChange={onChange}
      />
}

존재하는 사이트 객체는

{
   siteId,
   city,
   state,
   country,
   address,
   status,
}

객체가 명백한 것처럼 null이면 위의 항목이 null 인 것처럼 오류가 발생합니다.

더 자세한 정보를 표시해야하는 경우 댓글로 알려주세요.

제안 된 수정 사항으로 정렬 기능을 추가했지만 여전히 작동하지 않음

import { pipeSort } from '../fp';

const nameCompare = (x, y) => x.name.localeCompare(y.name);
const cityCompare = (x, y) => x.city.localeCompare(y.city);
const compareCountry = s => (x, y) => {
  if (!s) return 0;

  if (x.countryCode === s.countryCode && y.countryCode === s.countryCode)
    return 0;
  else if (x.countryCode === s.countryCode) return -1;
  else if (y.countryCode === s.countryCode) return 1;
  else return x.countryCode.localeCompare(y.countryCode);
};

export const sortSiteSelection = selectedSite => {
  if (!selectedSite) {
    console.log('NULL FROM SORT SITE');
    return 0;
  }
  pipeSort(compareCountry(selectedSite), nameCompare, cityCompare);
};