"Uncaught TypeError: Cannot convert undefined or null to object"

문제발생

"Uncaught TypeError: Cannot convert undefined or null to object"

  const newData = Object.values(data); //me
  console.log('it new', newData); //me

해결과정

제공된 코드를 기반으로 "Uncaught TypeError: Cannot convert undefined or null to object" 오류가 발생하는 이유는 data 변수가 정의되지 않은 경우나 null인 경우에 해당 변수의 속성에 접근하려고 하기 때문입니다.

React Query의 useQuery 훅을 사용할 때, data의 초기 값은 데이터를 가져오기 전까지는 undefined입니다. 오류를 방지하기 위해 data의 속성에 접근하기 전에 조건문을 추가하여 변수가 정의되었는지 확인할 수 있습니다.

다음은 필요한 조건문을 추가한 업데이트된 코드입니다:

// ...

const { data, isLoading, error } = useQuery('survey', async () => {
  const response = await axios.get('http://localhost:3001/survey');
  return response.data;
});

console.log('>>', data);

const newData = data ? Object.values(data) : []; // 조건문 추가

console.log('it new', newData);

// ...

업데이트된 코드에서 const newData = data ? Object.values(data) : [];는 data가 정의되었는지 확인합니다. 정의되었다면 Object.values(data)를 newData에 할당하고, 그렇지 않으면 빈 배열을 할당합니다. 이렇게 하면 data가 undefined인 경우 "Uncaught TypeError"가 발생하지 않습니다.

또한, 코드에는 두 개의 동일한 data.map 렌더링 로직 블록이 포함되어 있습니다. 중복을 피하고 코드를 깔끔하게 유지하기 위해 첫 번째 data.map 블록을 제거할 수 있습니다.

이러한 변경 사항을 적용하면 오류가 해결되고 "Uncaught TypeError"를 만나지 않고 설문 데이터를 렌더링할 수 있을 것입니다.

원인&결과

Q. 조건문 추가로 왜 오류가 해결되는거야?

조건문을 추가하여 data가 정의되지 않은 경우에 대비하는 이유는 JavaScript에서 undefined 또는 null 값을 객체로 변환하려고 할 때 발생하는 오류를 방지하기 위해서입니다.

원래 코드에서 const newData = Object.values(data);라고만 작성하면, data가 undefined 또는 null일 때 Object.values를 호출하려고 하게 됩니다. 그러나 Object.values 메서드는 유효한 객체를 전달받아야 제대로 동작하며, undefined 또는 null을 전달받으면 "Uncaught TypeError"가 발생합니다.

조건문을 추가하여 data의 유효성을 검사한 후에 Object.values를 호출하도록 수정함으로써, data가 undefined 또는 null인 경우에는 빈 배열을 newData에 할당하게 됩니다. 이렇게 함으로써 Object.values에 유효한 객체를 전달받도록 보장하여 "Uncaught TypeError" 오류를 방지할 수 있습니다.

따라서, 조건문을 추가하여 data가 undefined 또는 null일 때 오류를 방지하고 빈 배열을 할당함으로써 오류가 해결됩니다. 이로써 data의 속성에 안전하게 접근하여 원하는 작업을 수행할 수 있게 됩니다.

Q. Uncaught TypeError가 뭐야?

"Uncaught TypeError"는 JavaScript에서 발생하는 오류 중 하나입니다. 이 오류는 변수나 표현식의 유형(type)이 예상과 다른 경우 발생합니다. 보통 변수 또는 표현식을 객체로 변환하거나, 함수를 호출하거나, 유효한 작업을 수행하기 위해 해당 유형에 맞는 메서드를 호출할 때 발생합니다.

"TypeError"는 JavaScript에서 일반적으로 발생하는 오류 유형 중 하나로, 유형(type)에 관련된 문제를 나타냅니다. "Uncaught"는 해당 오류가 예외(Exception)로 처리되지 않고 코드 실행 중에 발생했음을 의미합니다.

"Uncaught TypeError: Cannot convert undefined or null to object"는 변수가 undefined 또는 null인 상태에서 해당 변수를 객체로 변환하려고 할 때 발생하는 오류입니다. JavaScript에서 undefined 또는 null 값을 객체로 변환하려고 하면, 유효한 객체가 아니므로 이러한 오류가 발생합니다.

이 오류는 변수나 표현식의 유효성을 확인하고, 해당 값이 undefined 또는 null이 아닌지 확인하는 등의 예외 처리를 수행하여 해결할 수 있습니다.

+) Object.values() 함수는 객체에서 값을 문자열 배열로 반환합니다